CSS整理（3）之让元素水平居中和垂直居中方法

最新推荐文章于 2019-04-06 22:09:40 发布

weixin_33755557

最新推荐文章于 2019-04-06 22:09:40 发布

阅读量95

点赞数

原文链接：https://my.oschina.net/hyzccc/blog/649522

版权

为什么80%的码农都做不了架构师？>>>

在html页面中，为了排版上的美观或是在不同尺寸的屏幕上正常显示，我们一般都会将元素进行水平居中或是垂直居中，现在做一下总结：

实现水平居中：

对于行内元素来说，直接对要设置的元素设置text-align：center属性就行了，代码如下：

 span{text-align:center;}

而对于块状元素来说，分为元素定宽和不定宽两种情况：

当元素定宽时：左右margin值设为auto或将右margin值设为auto；如

<style type="text/css">
    #nihao{
        width: 500px;
        margin: 20px auto;//也可以是margin:auto;
        border: 2px solid red;
        background-color: olive
    }
    </style>
<body>
<div id="nihao">nb</div>
</body>

当块状元素不定宽度时，要实现水平居中，有如下方法：

1，加入table 标签；table 本身不是块级元素，如果不给它设定宽度的话，会由内部元素的宽度“撑开”，但即使不设定它的宽度，仅设置 margin-left:auto 和 margin-right:auto 就可以实现水平居中。这种方法的缺点是加入了无语义标签；代码如下：

<style type="text/css">
table{margin-left:auto;margin-right:auto;}
.yanshi li{float:left;margin-right:5px;>
 </style>
</head>
<body>
<table>
    <tbody>
        <tr>
        <td>
             <ul class="yanshi">
             <li><a href="#">1</a></li>
             <li><a href="#">2</a></li>
             <li><a href="#">3</a></li>
             </ul> 
         </td>
         </tr>
     </tbody>
</table>

2 、设置display:inline;即把元素设置为行内元素，采用text-align:center属性值来将元素水平居中；但这种方法将元素设为行内元素，就丢失了块状元素的特点，比如就不能设置宽度和高度，可能对整个布局产生影响；代码如下：

<style type="text/css">
    .nihao{ 
        display: inline;
        background-color: olive;
        
    }
    </style>
</head>
<body>
<ul class="nihao">
<li a="#">1</li>
<li a="#">2</li>
<li a="#" >3</li>
</ul>

可以看出如果要实现元素水平居中，很重要的一点是必须将父元素设置为

text-align: center;

3,、设置给父元素设置float属性后再设置position:relative;和left:50%;，然后给子元素设置position：relative；和left:50%，实现水平居中；如：

<style type="text/css">
    .nihao{ 
        float:left;
        background-color: olive;
        position: relative;
        left: 50%;
    }
    .nihao li{
        position: relative;
        left: 50%;
    }
    </style>
</head>
<body>
<ul class="nihao">
<li a="#">1</li>
<li a="#">2</li>
<li a="#" >3</li>
</body>

让元素垂直居中的方法：

1、单行文本的垂直居中：设置元素的height属性和line-height属性，如：

<style type="text/css">
    .parent{ width:800px;  margin:0 auto; border:1px solid red;}
    .parent p{border:1px dashed red; line-height:60px; margin:30px;}
    </style>
</head>
<body>
<div class="parent">
<p>bairiyishanjin</p>
</div>

2、多行文本的垂直居中：给块级元素设置：display:table-cell;激活vertical-align属性，

<style>  
        *{padding: 0;margin:0;font-size: 12px;}  
        .nihao{
            display: table-cell;
            border:1px solid blue;
            vertical-align: middle;
            height:500px;
        }  
    </style>  
    <div class="nihao">  
        <p>你好！</p> 
    </div>

这种方法适用于各种情况，不管是容器定高还是不定高；

多行文本垂直居中还有一种方法：设置父元素的行高，将子元素inline-block化，将line-height设为normal；将基线设置为vertical-align:middle即可，代码如下：

<div style="border:1px solid red;line-height: 300px;">
        <p style="display: inline-block;line-height: normal;vertical-align: middle;text-align: left;">你好，明天</p>
    </div>

3、对于行级元素来说，可以直接设置它的：vertical-align:middle;但是此种情况仅适用于行级元素；

设置图片垂直居中显示的做法
1.当图片直接作为背景图片时:设置背景的高度，宽度可以不设置，设置background-position:center;这种相对简单；
2.设置div的height和img图片一致,设置父div的text-align:center;设置img的vertical-align:middle;

3.固定图片大小的设置：display:block;margin:0 auto;

这3种方法简单高效，本人亲测。

转载于:https://my.oschina.net/hyzccc/blog/649522