浅谈css中一个元素如何在其父元素居中显示

css如何垂直居中一个元素的问题已经是一个老生常谈的问题了。不管对于一个新手或者老手，在面试过程中是经常被问到的。前两天在看一个flex的视频教程，当中提到了有关元素的居中问题，所以今天小编就来扒一扒几种常见的方式。不足之处请大家批评指正（所有的代码都是自己亲手敲过可用的）


1、水平居中（margin:0 auto;）　　


　　关于这个，大家应该是最不陌生的,不管是在培训班还是自己自学的话 。这个应该是老师讲的第一个方法了（水平方向上），但是其有一个前提，就是被包裹的元素不能有浮动的属性。否则的话这个属性就会失效。具体如下图代码：


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
        }
        item{
            margin:0 auto;
            width: 100px;
            height: 100x;
            background: green;
        }
</style>
 
    <div class="box">

        <div class="item"></div>

<a href="www.changtu.com/chepiao/baodingshi-wenzhoushi.html">保定到温州汽车</a>

     </div>