浅谈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>