css实现水平居中和垂直居中的常见方式

我们在实际工作中常会遇到需要设置居中的场景,居中分为水平居中和垂直居中。针对不同的情况又有不同的实现方式,例如行内元素和块状元素。

  1. 水平居中:

    行内元素:text-align:center;//这个比较简单
    块状元素:定宽的块状元素通过设置左右margin为auto实现,例如margin:10px auto;不定宽的块状元素:加入 table 标签后按照定宽元素进行设置;设置 display: inline 后按照行内元素设置;设置position:relative left:50% 通过给父元素设置 float,然后给父元素设置position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。

  2. 垂直居中:
    例子1.
    对于单行文本最简单的垂直居中就是利用line-height,首先,定义整个div的高度,然后再设置line height 的值等于div高度,这样就实现了单行文本的居中效果。
    例子2.

       <div id="parent">
       <img src="image.png" alt="" />
       </div>

    对于图片垂直居中可以利用css的vertical-align:middle实现:

       #parent {
       line-height :200px;
       }
       #parent img{
       vertical-align:middle;
       }

    例子3.
    整个div 居中

       <div id="parent">
       <div id="child">Content here</div>
       </div>
    

    让id为child的div 居中实现代码:

       #parent{display:table;}
       #child {
       display:table-cell;
       vertical-align:middle;
       }
       //display:table-cell;IE8以下不支持。
       IE8以下的浏览器可以使用
       #child{
       display:inline-block;
       }

    例子4.针对div块级元素,可以使用下面的方法实现垂直居中

       HTML:
       <div id="parent">
       <div id="child">Content here</div>
       </div>
       
       css:
       #parent{
       position:relative;}
       #child {
       positon:absolute;
       top:50%;
       left:50%;
       height:30%;
       width:50%;
       margin:-15% 0 0 -25%;
       }

    设置父级position为relative;子元素postion为absolute;同时设置子元素的top为50%,水平也想居中的话,就设置left为50%

    原文作者:晚安职场
    原文地址: https://segmentfault.com/a/1190000007004712
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞