css水平垂直定位相关知识

说明：在原文的基础上进行了一定的修改

元素水平居中的几个方法

1、行内元素在块级元素里的居中，例如想设置文本、图片等行内元素水平居中时，可以通过给需要设置的元素添加一个父元素的容器，然后设置这个父元素（容器）的text-align属性即可。一般这个属性是用于将文字水平居中的，我们的行内元素就相当于一行之内的文字了，所以可以使用这个方法。

<div class="text-center">水平居中</div>      

.text-center {

    width: 200px;

    height: 100px;

    text-align: center;  /* 让文本水平居中 */

    color: #fff;

    background-color: #f54;

}

2 . 宽度一定的块级元素在父块级元素里的水平居中。因为是块状元素，所以就没办法运用第一种方法的text-align属性了，这次我们是通过对需要设置的元素的“左右margin”值为“auto”来实现，margin的上下值可以根据需求随意设置，但是左右一定要为”auto”！这种方法优点是简单易懂，兼容性也强，但是扩展性比较差，无法自适应未知宽度的元素。

<div class="parent-box">

    <div class="child-box">块级元素水平居中</div>

</div>

 

.parent-box {

    width: 250px;

    height: 150px;

    background-color: #f98;

}

.child-box {

    width: 200px;

    height: 100px;

    background-color: #f00;

    margin-left: auto;

    margin-right: auto;

}

 

3、宽度不确定块状元素的水平居中显示。这里大概也可以分为三个方法：

1）运用table标签；2）设置display:inline；3）设置position:relative和left:50%。

3.1、运用table标签。就是将需要进行居中的元素，在需要设置的元素外面加上一个table标签，给这个table设置”左右margin居中”（可与表单结合）。代码样例：

table {

    margin: 0 auto;

}

...

<table>

        <tbody>

            <tr><td>

                <a href="#">Prev</a>

                <a href="#">1</a>

                <a href="#">2</a>

                <a href="#">3</a>

                <a href="#">Next</a>

            </td></tr>

        </tbody>

</table>

 

3.2、改变块级元素的display为inline类型，然后设置text-align:center来实现居中效果。

<style type="text/css">

.container {

    text-align: center;

}

.container li {

    display: inline;

}

 

</style>

    <div class="container">

        <ul>

            <li><a href="#">Prev</a></li>

            <li><a href="#">1</a></li>

           <li><a href="#">Next</a></li>

        </ul>

    </div>

3.3、运用相对定位和绝对定位

<style type="text/css">

   .container {

     position: absolute;

     left: 50%;   

    }

    .container ul {

        position: relative;

        right: 50%;

        padding:0;margin: 0;

    }

    .container li {

        display: inline;

    }

    .container a {

        padding: 0 10px;

    }

</style>

    <div class="container">

        <ul>

            <li><a href="#">Prev</a></li>

            <li><a href="#">1</a></li>

            <li><a href="#">2</a></li>

            <li><a href="#">3</a></li>

            <li><a href="#">Next</a></li>

        </ul>

    </div>

元素垂直居中的几个方法

 

1单行文本的垂直居中，让 line-height 和 height 相等。

<div class="text-middle">单行文本竖直居中</div>

 

.text-middle {

    width: 200px;

    height: 100px;

    line-height: 100px;

    background-color: #f00;

    color: #fff;

}

注意：

这里说的 height 和 line-height 相等，有一个注意事项：

当 box-sizing: content-box; 时(这也是默认的值)。将 height 和 line-height 的值设置为一样就行了；当 box-sizing: border-box; 时, line-height 的值要从 height 里减去 padding-top, padding-bottom, border-top, border-bottom 四个的值，也就是和分配给内容的有效高度相等。

 

2 不确定高度的一段文本竖直居中，这里不适用高度，使用 padding-top: ...; padding-bottom: ...; padding-top 和 padding-bottom 值相同.

<div class="text-middle-padding">不确定高度的一段文本竖直居中</div>

 

.text-middle-padding {

    width: 150px;

    padding-top: 30px;

    padding-bottom: 30px;

    color: #fff;

    background-color: #f00;

}

3确定高度（块级元素在块级元素），使用绝对定位 position: absolute; top: （父元素高度-子元素高度）/2; （水平居中设置left）

<div class="parent-box">

    <div class="child-box">确定高度的块级元素竖直居中</div>

</div>

 

.parent-box {

position: relative;

width: 250px;height: 150px;

background-color: #f00;

}

.child-box {

    position: absolute;top:25px;

    width: 200px;height: 100px;

    background-color: #f54;

}

4确定高度（块级元素在块级元素），直接使用相对定位 position: relative; top: （父元素高度-子元素高度）/2; （水平居中设置left）

<style type="text/css">

.parent-box {

    width: 250px;height: 150px;

    background-color: #f00;

}

.child-box {

    width:200px;height:100px;

    background-color:#f54;

    position: relative;

    top:25px;

}

<div class="parent-box">

<div class="child-box">确定高度的块级元素竖直居中</div>

PS：直接复制有的div不显示，是代码空格的问题

元素水平垂直居中的几个方法

 

1绝对定位实现（块级元素在块级元素中居中），使用 position: absolute; top: ; right:m ; bottom: n;

m=(父元素高度-子元素高度)/2，n=(父元素宽度-子元素宽度)/2

<div class="parent-box">

    <div class="child-box">绝对定位实现水平垂直居中居中</div>

</div>

 

.parent-box {

    position: relative;

    width: 250px;height: 150px;

    background-color: #f00;

}

.child-box {

    position: absolute;

    top: 25px;left: 25px;

width: 200px; height: 100px;

    background-color: purple;

}

 

2平移实现水平垂直居中法：通过使用 transform: translate(-50%,-50%); 添加厂商前缀 -webkit- 兼容 Safari 和 Chrome

.parent-box {

    width: 200px;

    height: 200px;

    background-color: #f00;

}

.child-box {

    position: relative;

    top: 50%;    

    left: 50%;

    width: 150px;

    height: 150px;

    background-color: #f54;

    -webkit-transform: translate(-50%,-50%);

            transform: translate(-50%,-50%);

}

</style>

 

     <div class="parent-box">

    <div class="child-box">平移实现水平垂直居中法</div>

</div>