html,css元素居中

网页基本布局中，常常会用到 水平居中 和 水平垂直居中
本文主要是探讨有哪些方法可以实现效果，而不是指出最佳方案哦，使用什么方法看自己需要哦~

1.元素宽高已知固定

A.元素宽高已知固定，水平居中

①使用margin:0 auto;

说明： 只对块级元素起作用，对同级元素不会产生影响

实现效果：

html:

<div class="father">
    <div class="son">我是son</div>
    <span>我是span</span>
    <p>我是p</p>
</div>

css:

.father{
    height: 600px;
    width: 600px;
    border: 1px solid green;
}
.son{
    width: 100px;
    height: 100px;
    background: red;
    margin:0 auto;
}

②元素的父级使用text-align: center;，元素本身转换为行内块元素display: inline-block;

说明: text-align: center;只对行内块级元素或者行内元素起作用，对同级元素会产生影响

实现效果：

html:

<div class="father">
    <div class="son">我是son</div>
    <p>我是p</p>
</div>

css:

.father{
    height: 400px;
    width: 600px;
    border: 1px solid green;
    text-align: center;
}
.son{
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
}

B.元素宽高已知固定，水平垂直居中

利用定位

说明：一般情况下使用定位，子元素使用绝对定位position: absolute;，父级元素使用相对定位position: relative;，初学的时候真是记不住，容易弄混淆，这里有一个口诀就是“子绝父相”，这样记起来就so easy啦~~

实现效果和原理说明：

html:

<div class="father">
    <div class="son"></div>
</div>

css:

.father{
    position: relative;
    height: 400px;
    width: 600px;
    border: 1px solid green;
}
.son{
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    top:50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

原理：子级元素的left,top的百分比值，是根据离本元素最近的一个具有定位属性的祖先元素的宽高计算的，此处为父级元素；top:50%;left:50%; ，使元素上左各距父级元素的距离为父级元素宽高的一半；在根据margin-top: -50px;margin-left: -50px; ，使元素向上移动自己本身高的一半，向左移动自己本身宽的一半；实现居中。

此方法也适用于元素的宽高为百分比的情况，margin-top: -*%;margin-left: -*%; *各为元素宽度和高度的一半，如元素宽为80%，高度为40%，即margin-top: -20%;margin-left: -40%;
注意：如果元素的宽度和高度不是百分比，margin的数值如果为百分比是根据父级元素计算的。

2.元素宽高未知

说明：使用定位和CSS3的transform 属性，原理同上

实现效果：

html:

<div class="father">
    <div class="son"></div>
</div>

css:

.father{    
    position: relative; 
    height: 400px;
    width: 600px;
    border: 1px solid green;
}
.son{
    position: absolute;
    width: auto;/* 宽度根据内容自适应 */
    height:auto;/* 高度根据内容自适应 */
    background: red;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

注：此处的transform: translate(-50%, -50%);百分比数值是根据元素本身宽高的百分比计算的，与margin不同。

兼容性：Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。

3.分页居中

对于分页效果，主要的是分页的个数不确定，即元素的宽度不确定，基本不会要求垂直居中，所以最简单的方法就是利用1.A.②中的方法

实现效果：

html:

<div class="father">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

css:

.father{    
    height: 400px;
    width: 600px;
    border: 1px solid green;
    text-align: center;
}       
ul{
    display: inline-block;
    list-style: none;
    margin-top: 10px;
}
ul li{
    float: left;
    width: 20px;
    height: 20px;
    background: #ccc;
    margin: 0 5px;
}

---

本文到此就结束啦，有什么需要改进的地方欢迎大家指教~~共同学习，共同进步