阅读量:1
目录
5.绝对定位 + transform (无须知晓盒子的具体大小)
1. 使用Flex布局
如何实现：
在父元素上添加：
display: flex;
align-items: center;
justify-content: center;
<style> * { padding: 0; margin: 0; } .parent { display: flex; /* 水平居中 */ justify-content: center; /* 垂直居中 */ align-items: center; width: 500px; height: 500px; background-color: aqua; } .child { width: 200px; height: 200px; background-color: pink; } </style> <body> <div class="parent"> <div class="child">我要水平垂直居中</div> </div> </body>2. 使用Grid布局
如何实现：
在父元素上添加：
display: grid;
place-items: center;
<style> * { padding: 0; margin: 0; } .parent { display: grid; /* 水平和垂直方向都居中对齐 */ place-items: center; width: 500px; height: 500px; background-color: aqua; } .child { width: 200px; height: 200px; background-color: pink; } </style> <body> <div class="parent"> <div class="child">我要水平垂直居中</div> </div> </body>3.绝对定位 + 负外边距 (必须知晓盒子的具体大小)
相对父级上边和左边，或者下边和右边各移动50%，同时通过外边距减去自身的宽高各一半的大小。
如何实现：
在父元素上添加：
position: relative;
在子元素上添加：
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; //子元素高度的一半
margin-left: -100px; //子元素宽度的一半
<style> * { padding: 0; margin: 0; } .parent { position: relative; width: 500px; height: 500px; background-color: aqua; } .child { position: absolute; top: 50%; left: 50%; margin-top: -100px;//子元素高度的一半 margin-left: -100px;//子元素宽度的一半 width: 200px; height: 200px; background-color: pink; } </style> <body> <div class="parent"> <div class="child">我要水平垂直居中</div> </div> </body>4.绝对定位+外边距 auto
将盒子的上下左右定位全部设置为0，同时设置外边距自适应
如何实现：
在父元素上添加：
position: relative;
在子元素上添加：
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
<style> * { padding: 0; margin: 0; } .parent { position: relative; width: 500px; height: 500px; background-color: aqua; } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 200px; height: 200px; background-color: pink; } </style> <body> <div class="parent"> <div class="child">我要水平垂直居中</div> </div> </body>
5.绝对定位 + transform (无须知晓盒子的具体大小)
使用CSS3中的新属性transform: translate(-50%,-50%); 来直接减去盒子自身的50%大小
如何实现：
在父元素上添加：
position: relative;
在子元素上添加：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
<style> * { padding: 0; margin: 0; } .parent { position: relative; width: 500px; height: 500px; background-color: aqua; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; background-color: pink; } </style> <body> <div class="parent"> <div class="child">我要水平垂直居中</div> </div> </body>
