#05你认真学了css？元素居中

一、元素水平居中

1、text-align

text-align:center;行内元素（图片或文字）居中
在父元素上设置text-align: center  使文字/图片在整个页面上水平居中

 .container{    text-align:center;
}

如一小选项按钮居中，可以使用：

 .container{    display:inline-block;    text-align:center;
}

2、margin

margin: 0 auto; 用于块级元素的居中

.container {   width: 80%;  /*块级元素充满页面 定宽必备 */
   margin-left: auto;   margin-right: auto;  /*或者 margin：0 auto;*/}

如：
块级元素居中

代码如下：

 <style>
     .wrap{       max-width:600px;       background: #ccc;       margin: 0 auto;
     }  </style></head>

  <div class="wrap">
    <h1>hello</h1>
    <p>world</p>
  </div>

image

二、元素垂直居中

1、居中 VS 不居中

注：高度由里面的内容撑开，一般不设置高度

代码如下：

 <style>.ct{  padding: 40px 0;  text-align: center; 
  background: #eee;
} </style><div class="ct">
    <p>你好世界</p>
    <p>helloworld</p>
  </div>

image

2、vertical-align实现居中

vertical-align: middle; 让行内元素或表格元素相对于基线对齐并居中

案例：如图片进行水平、垂直居中

代码如下：图片在容器内水平、垂直居中

<style>.box{
  width: 300px;
  height: 200px;
  border: 1px solid ;
  text-align: center;
}
/*注：子元素和父元素分别设置 vertical-align:middle;  ，均无法实现垂直居中*/

/*使用一个伪元素，设置一个虚拟的基准线*/
.box:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;     
}
.box img{
  vertical-align: middle;     
  background: blue;
}</style>

 <div class="box">
    <img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
  </div>

image

3、table-cell 实现居中

display: table-cell;水平垂直居中

代码如下：

<style>.box{
  width: 300px;  /*由于是行内元素，宽度必备*/
  height: 200px;
  border: 1px solid ;
  display: table-cell;     
  vertical-align: middle;   
  text-align: center;
}</style>

 <div class="box">
    <img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
  </div>

4、绝对定位实现居中

案例：如弹出框 弹出框水平垂直居中

情况1：固定宽高块在浏览器窗口水平垂直居中，

代码如下：

<style>html,body {  height: 100%;
}.dialog {  position: absolute;  /*绝对定位*/
  left: 50%;  top: 50%;  margin-left: -200px;  margin-top: -150px;  width: 400px;  height: 300px;  box-shadow: 0px 0px 3px #000;
}.dialog .header{  padding: 10px;  background: #000;  color: #fff;
}.dialog .content{  padding: 10px;
}</style>

  <div class="dialog">
    <div class="header">我是标题</div>
    <div class="content">我是内容</div>
  </div>

image

情况2： 去掉宽高的块在浏览器窗口水平垂直居中，

代码如下：

<style>html,body {  height: 100%;
}.dialog {  position: absolute;  left: 50%;  top: 50%; /*  margin-left: -200px;
  margin-top: -150px; */

  /*CSS3属性  相对于自己的偏移*/
  transform:translate(-50%,-50%);  box-shadow: 0px 0px 3px #000;
}.dialog .header{  padding: 10px;  background: #000;  color: #fff;
}.dialog .content{  padding: 10px;
}</style>

  <div class="dialog">
    <div class="header">我是标题</div>
    <div class="content">我是内容</div>
    <div class="content">我是内容</div>
    <div class="content">我是内容</div>
    <div class="content">我是内容</div>
  </div>

image

作者：饥人谷_远方
链接：https://www.jianshu.com/p/fa56a15b3e17