水平居中和垂直居中常用方法总结

水平居中

行级元素：为该行级元素的父元素设置text-align:center样式

<div style="width: 500px;height: 100px;border: 1px solid green;text-align:center;">
    <span>行级元素</span>
</div>

块级元素：为其自身设置margin:auto样式

<div style="width: 500px;height: 100px;border: 1px solid red;">
    <div style="margin:auto;width: 100px;height: 100px;border: 1px solid gold">块级元素</div>
</div>

垂直居中

1.display:table;此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符.

display:table-cell;此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

<div style="display: table;width: 500px;height: 200px;border: 1px solid red;">
    <div style="display: table-cell;vertical-align: middle;text-align:center;">块级元素</div>
</div>

 

2. 利用flex布局使内部块级元素水平，垂直居中

display:flex;justify-content: center; align-items:center;

<div style="display:flex;justify-content: center; align-items:center; width: 500px;height: 200px;border: 1px solid green;text-align:center;line-height:100px ">
    <div style="width: 100px;height: 100px;border: 1px solid gold">块级元素</div>
</div>

3.利用定位实现

父元素：position:relative;

子元素：position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);

<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;">
    <div style="position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">块级元素</div>
</div>