如何实现CSS居中？?CSS居中常用方法_html/css_WEB-ITnose

来源：http://www.ido321.com/824.html

一、水平居中

      1、内联元素居中：相对父级块级元素居中对齐

   1: .center-children {

   2:   text-align: center;

   3: }

 

      2、块级元素居中：设置margin-left和margin-right为auto让它居中（同时还要设置width，否则它就会承满整个容器，无法看出居中效果）

   1: .center-me {

   2:   margin: 0 auto;

   3: }

 

如果有很多块级元素需要水平居中成一行，最好使用一个不同的display类型。这是一个使用inline-block和flex的例子。

演示地址：http://jsfiddle.net/Web_Code/5fvrwwk1/embedded/result/

   1: <main class="inline-block-center"></main>

   2:   <div>    <pre style="代码" class="precsshei">   3:     I'm an element that is block-like with my siblings and we're centered in a row.

   4:   

   5:   <div>    <pre style="代码" class="precsshei">   6:     I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.

   7: