css居中汇总

一、水平居中

1.1 行内元素

给父元素设置text-align:center;

<style type="text/css">
        .parent{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            text-align: center;
        }
</style>

<!--html-->
    <div class="parent">
       哈哈
    </div>

效果如下：

注：虽然标题标签h1-h6和段落p标签是块级元素，在设置水平居中和垂直居中时，可以将它们当作行内元素设置居中。

1.2 块级元素

1.2.1 有宽

方法一：给该元素设置margin：0 auto; 可以改变0的值，但第二个值设置水平居中，必须为auto

	<style type="text/css">
        .parent{
            background-color: pink;
            height: 30px;      
        }
        .child{
            width: 200px;
            height: 30px;     //可以不用设置高，这里是为了显示背景颜色而设置的
            margin: 0 auto;
            background-color: blueviolet;
        }
    </style>
    
    <!--html-->
    <div class="parent">
      <div class="child"></div>
    </div>

效果图如下：

方法二：使用绝对定位
第一步：给父级添加相对定位：position：relative;
第二步：给该元素以下样式：
position：absolute
left:50%
margin-left: -(该元素宽度的一半)px

	<style type="text/css">
        .parent{
            position: relative;
            height: 30px;
            background-color: cornflowerblue;
        }
        .child{
            width: 200px;
            position: absolute;
            left: 50%;
            margin-left: -100px;
            height: 30px;
            background-color: pink;
            text-align: center;
        }
    </style>

	<!--html-->
    <div class="parent">
      <div class="child">child</div>
    </div>

效果图如下：

1.2.2 无宽

方法一：使用绝对定位position: relative;
第一步：给父级设置相对定位
第二步：该子元素设置以下属性：
position: absolute;
left: 50%;
transform: translateX(-50%);

	<style type="text/css">
        .parent{
            position: relative;
            height: 30px;
            background-color: cornflowerblue;
        }
        .child{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            height: 30px;
            background-color: pink;
        }
    </style>

	 <!--html-->
    <div class="parent">
      <div class="child">child</div>
    </div>

效果如下：

方法二：使用flex，给父级下列两个属性：
display:flex;
justify-content:center;

	<style type="text/css">
        .parent{
            display: flex;
            justify-content:center;
            height: 30px;
            background-color: cornflowerblue;
        }
        .child{
            height: 30px;
            background-color: pink;
        }
    </style>

	<!--html-->
    <div class="parent">
      <div class="child">child</div>
    </div>

效果如下：

注：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效，且设置flex需要考虑兼容性，IE低版本不支持。

**方法三：**给元素设置：
width: fit-content;
margin: auto;

<style type="text/css">
        .parent{
            height: 30px;
            background-color: cornflowerblue;
        }
        .child{
            width: fit-content;
            margin: auto;
            height: 30px;
            background-color: pink;
        }
    </style>

 	<!--html-->
    <div class="parent">
      <div class="child">child</div>
    </div>

效果图同上图
注：CSS3新特性width: fit-content，目前仅支持谷歌和火狐浏览器，但非常适合移动端开发！

二、垂直居中

2.1 单行文本

第一步：设置height属性
第二步：设置line-height属性
注意：这两个属性的值要相同。
效果图如下：

2.2 多行文本

给该文本的父级添加以下两个属性：
display：table-cell;
vertical-align:middle;
注：单行文本也可以使用该方法使其垂直居中，如img等文本元素。

<style type="text/css">
        .parent{
            width: 500px;
            height: 200px;
            color: white;
            background-color: pink;
            display: table-cell;
            vertical-align: middle;
        }
 </style>
	<!--html-->
    <div class="parent">
        生活是难的，每一个在生活中的人，十之八九遇到的事情都是不如意的事情，这也造成了我们人与人之间极其容易发生摩擦.
    </div>

效果图如下：

2.3 块级元素

2.3.1 给该元素设置了宽高

情况一：给该元素设置了宽高
第一步：给父级添加相对定位：position：relative;
第二步：给该元素以下样式：
position：absolute；
top:50%;
margin-top: -(该元素高度的一半)px

<style type="text/css">
        .parent{
            position: relative;
            width: 500px;
            height: 200px;
            color: white;
            background-color: pink;
        }
        .child{
            width: 100%;
            height: 100px;
            background-color: cornflowerblue;
            position: absolute;
            top: 50%;
            margin-top: -50px;
        }
 </style>
	<!--html-->
    <div class="parent">
        <div class="child"></div>
    </div>

效果如下：

2.3.2 没有给该元素设置宽高

情况二：没给该元素设置宽高
方法一：与设置水平居中同理
第一步：给父级设置相对定位
第二步：该元素的css设置如下：
position: absolute;
top: 50%;
transform: translateY(-50%);

<style type="text/css">
        .parent{
            position: relative;
            width: 500px;
            height: 200px;
            color: white;
            background-color: pink;
        }
        .child{
            width: 100%;
            background-color: cornflowerblue;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
</style>

	<!--html-->
    <div class="parent">
        <div class="child">生活是难的，每一个在生活中的人，十之八九遇到的事情都是不如意的事情，这也造成了我们人与人之间极其容易发生摩擦，因为大家总遇到不如意的事情，再碰着两人撞上了，多数都会产生矛盾。然而，有一类人的生活除外，他们就算是遇到了再大的不如意，他们也能够做到不与别人发生冲突，只因他们笑着面对生活。
        </div>
    </div>

效果如下：

方法二：使用flex
给父级设置css属性
display: flex;
flex-direction: column; //不加这一行代码会使元素水平居中
justify-content: center;

<style type="text/css">
        .parent{
            width: 400px;
            height: 300px;
            background-color: pink;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .child{

        }
    </style>

	<!--html-->
    <div class="parent">
        <div class="child">生活是难的，每一个在生活中的人，十之八九遇到的事情都是不如意的事情，这也造成了我们人与人之间极其容易发生摩擦，因为大家总遇到不如意的事情，再碰着两人撞上了，多数都会产生矛盾。然而，有一类人的生活除外，他们就算是遇到了再大的不如意，他们也能够做到不与别人发生冲突，只因他们笑着面对生活。
        </div>
    </div>

效果如下：

或：
给父级设置css属性：
display: flex;
align-items: center;

或：
给父级设置：
display: flex;
给子元素设置：
align-self: center;

方法三：
给父级设置：
display: table-cell;
vertical-align: middle; //注：vertical-align这个适用于行内元素的垂直居中，块元素不可以。

<style type="text/css">
        .parent{
            width: 400px;
            height: 300px;
            background-color: pink;
            display: table-cell;
            vertical-align: middle;
        }
        .child{

        }
  </style>
  <!--html代码与方法二一样-->

三、水平垂直居中

情况一：该元素设置了宽高
第一步：给父级添加相对定位
第二步：给该元素以下样式：
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

<style type="text/css">
        .parent{
            width: 400px;
            height: 300px;
            background-color: pink;
            position: relative;

        }
        .child{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            background-color: white;
        }
    </style>
	<!--html-->
    <div class="parent">
        <div class="child"></div>
    </div>

效果如下：

情况二：该元素没设置宽高
和设置了宽度的设置一样，只需要再在该元素中添加：
width: fit-content; // fit-content目前仅支持谷歌和火狐浏览器，但非常适合移动端开发！
height:fit-content;

<style type="text/css">
        .parent{
            width: 400px;
            height: 300px;
            background-color: pink;
            position: relative;

        }
        .child{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: fit-content;
            height:fit-content;
            background-color: white;
        }
    </style>

	<!--html-->
    <div class="parent">
        <div class="child">哈哈哈</div>
    </div>

效果如下：

参考：http://bugshouji.com/shareweb/t1135