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

时间 2019-11-12

标签 css 整理元素水平居中垂直方法栏目 CSS 繁體版

原文原文链接

在html页面中，为了排版上的美观或是在不一样尺寸的屏幕上正常显示，咱们通常都会将元素进行水平居中或是垂直居中，如今作一下总结：css

实现水平居中：html

对于行内元素来讲，直接对要设置的元素设置text-align：center属性就好了，代码以下：布局

 span{text-align:center;}

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

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

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

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

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

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

能够看出若是要实现元素水平居中，很重要的一点是必须将父元素设置为 it

text-align: center;

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

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

让元素垂直居中的方法：

一、单行文本的垂直居中：设置元素的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>

二、多行文本的垂直居中：给块级元素设置：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>

三、对于行级元素来讲，能够直接设置它的：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种方法简单高效，本人亲测。