水平居中实现方案
确定宽度的元素水平居中
1.我们可以通过给该元素的父级设置margin: 0 auto的方式来实现。
HTML:
<body>
<div class="parent">
<div class="child">
center
</div>
</div>
</body>CSS:
.child {
width: 200px;
margin: 0 auto;
}此时检查元素即可即可实现内层的div实现了居中,这种方式是最为我们熟知的，其缺点是需要设置子元素的宽度。
2.通过position定位
HTML:
<div>
<ul>
<li>center</li>
</ul>
</div>CSS:
div {
float: left;
width: 100%;
position: relative;
}
ul {
position: absolute;
left: 50%;
width: 200px;
margin-left: -100px;
}不确定宽度的元素居中
1.给子元素设置display: inline-black,父元素设置text-align: center。
HTML:
<div>
<p>
center
</p>
</div>CSS:
div {
text-align: center;
}
p {
display: inline-block;
}2.当元素被设置float的时候,它的宽度就会被其内容撑开，然后通过positon定位来实现横向居中。
HTML:
<div>
<ul>
<li>center</li>
</ul>
</div>CSS:
div {
float: left;
width: 100%;
position: relative;
}
ul {
position: relative;
left: 50%;
float: left;
}
li {
float: left;
position: relative;
right: 50%;
display: block;
}3.flex布局， justify-content:center;主轴居中。align-items:center;交叉轴居中；当设置了flex-direction属性时，主轴的方向会改变。
4.css width: fit-content属性。
5.用css3的transform
HTML:
<div>
<p class="test">
center
</p>
</div>CSS:
div {
position: relative;
}
.test {
position: relative;
left: 50%;
float: left;
transform: translateX(-50%);
}总结一下起来也就是两种方式，其中有比较直接的方式比如，margin: 0 auto，虽然这种方式的兼容性很好，没有副作用，但是这种方式最主要的缺陷是只适用于子元素宽度固定的情况。或者用css3的固有属性flex布局或者 width: fix-content这种方式实现起来简单直接，但在处理一些旧版本的浏览器时，存在很严重的兼容性问题。还有就是间接的实现方式通过position定位，具体思想主要是子元素先移动到父元素二分之一的位置，relative，或者absoulte都可以实现，然后在将子元素向左移动自身二分之一的位置，这种方式有广泛的适用性，但是思路可能比较复杂。
垂直居中实现方案
1.用css3的transform属性，以及postion定位，与上面的水平居中类似，只是改为top:50%,translateY(-50%)即可。
2.设置父元素display: table;子元素dispaly: table-cell,vertical-align: middle;
3.绝对定位
HTML:
<div class="parent">
<div class="child">
nnnnnnn
</div>
</div>CSS:
.parent {
position: relative;
height: 400px;
}
.child {
margin: auto;
height: 200px;
position: absolute;
top:0;
bottom: 0;
}4.单行文本时可以设置height与line－height相同实现文字居中。
5.外边距margin取负数，大小为width/height的一半，再加上top: 50%; left: 50%;