已知待居中元素的width和height
方法一:
关键点:给其父容器设置定位,子容器:position:absolute;
left:50%;
top:50%;
margin-top:-50px; /*因为这个child-01的height为100px,所以这里是-50px*/
margin-left:-50px;
代码示例:
html:
<div class="parent-01"> <div class="child-01">我是child-01</div> </div>
css:
/*parent-01开始*/ .parent-01{ position:relative; width:200px; height:200px; border:green solid 1px; margin-bottom:50px; margin-left:50px; } .child-01{ position:absolute; left:50%; top:50%; margin-top:-50px; /*因为这个child-01的height为100px,所以这里是-50px*/ margin-left:-50px; width:100px; height:100px; background-color:yellow; } /*parent-01结束*/
方法二:
关键点:父容器定位,子容器:position:absolute;
margin-top:50%;
margin-left:50%;
transform:translate(-50px,-50px);/*为了实现水平垂直居中,所以这里的translate不能分开写,否则后面的会覆盖前面的,这里写px也是可以得
代码示例:
html:
<div class="parent-02"> <div class="child-02">我是child-02</div> </div>
css:
/*parent-02开始*/ .parent-02{ position:relative; width:200px; height:200px; border:green solid 1px; margin-bottom:50px; margin-left:50px; } .child-02{ position:absolute; margin-top:50%; margin-left:50%; transform:translate(-50px,-50px);/*为了实现水平垂直居中,所以这里的translate不能分开写,否则后面的会覆盖前面的,这里写px也是可以得*/ /*transform:translate(-50px,-50px);/*为了实现水平垂直居中,所以这里的translate不能分开写,否则后面的会覆盖前面的,这里写px也是可以得,不过前提是已知子容器的宽高*/ background-color:yellow; width:100px; height:100px; } /*parent-02结束*/
方法三:
关键点:父容器使用flex布局,即父容器设置为:
display:flex;
justify-content:center;/*伸缩项目向一行的中间位置对齐*/
align-items:center;/*伸缩项目向一列的中间位置对齐*/
html:
<div class="parent-04"> <div class="child-04">我是child-04</div> </div>
css:
/*parent-04开始*/ .parent-04{ width:200px; height:200px; border:green solid 1px; margin-bottom:50px; margin-left:50px; display:flex; justify-content:center;/*伸缩项目向一行的中间位置对齐*/ align-items:center;/*伸缩项目向一列的中间位置对齐*/ } .child-04{ width:100px; height:100px; background-color:yellow; } /*parent-04结束*/
方法四:
关键点:父容器设置定位,子容器:position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
html:
<div class="parent-03"> <div class="child-03">我是child-03</div> </div>
css:
/*parent-03开始*/ .parent-03{ position:relative; width:200px; height:200px; border:green solid 1px; margin-bottom:50px; margin-left:50px; } .child-03{ position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; width:100px; height:100px; background-color:yellow; } /*parent-03结束*/
待水平垂直居中的元素width和height未知
方法一:
关键点:父容器定位,子容器: position:absolute;
margin-top:50%;
margin-left:50%;
transform:translate(-50%,-50%);/*为了实现水平垂直居中,所以这里的translate不能分开写,否则后面的会覆盖前面的*/
和上述方法二类似,区别在于translate()中的值是%还是px
该演示的完整代码:
<!DOCTYPE html> <html> <head> <title>常见的水平垂直居中方法汇总</title> <meta charset="UTF-8"/> <style type="text/css"> *{ margin:0; padding:0; } /*parent-01开始*/ .parent-01{ position:relative; width:200px; height:200px; border:green solid 1px; margin-bottom:50px; margin-left:50px; } .child-01{ position:absolute; left:50%; top:50%; margin-top:-50px; /*因为这个child-01的height为100px,所以这里是-50px*/ margin-left:-50px; width:100px; height:100px; background-color:yellow; } /*parent-01结束*/ /*parent-02开始*/ .parent-02{ position:relative; width:200px; height:200px; border:green solid 1px; margin-bottom:50px; margin-left:50px; } .child-02{ position:absolute; margin-top:50%; margin-left:50%; /*transform:translate(-50%,-50%);/*为了实现水平垂直居中,所以这里的translate不能分开写,否则后面的会覆盖前面的*/ transform:translate(-50px,-50px);/*为了实现水平垂直居中,所以这里的translate不能分开写,否则后面的会覆盖前面的,这里写px也是可以得*/ background-color:yellow; width:100px; height:100px; } /*parent-02结束*/ /*parent-03开始*/ .parent-03{ position:relative; width:200px; height:200px; border:green solid 1px; margin-bottom:50px; margin-left:50px; } .child-03{ position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; width:100px; height:100px; background-color:yellow; } /*parent-03结束*/ /*parent-04开始*/ .parent-04{ width:200px; height:200px; border:green solid 1px; margin-bottom:50px; margin-left:50px; display:flex; justify-content:center;/*伸缩项目向一行的中间位置对齐*/ align-items:center;/*伸缩项目向一列的中间位置对齐*/ } .child-04{ width:100px; height:100px; background-color:yellow; } /*parent-04结束*/ </style> </head> <body> <div class="parent-01"> <div class="child-01">我是child-01</div> </div> <div class="parent-02"> <div class="child-02">我是child-02</div> </div> <div class="parent-03"> <div class="child-03">我是child-03</div> </div> <div class="parent-04"> <div class="child-04">我是child-04</div> </div> </body> </html>