CSS水平居中和垂直居中

renpinghao

2019-06-26

CSS水平居中和垂直居中

行内元素居中

水平居中

1.给父元素设置text-align:center

<div style="text-align: center">
    <span>行内元素span居中</span>
</div>

2.flex布局
设置父元素display:flex;justify-content:center;

<div style="display:flex;justify-content:center;">
    <span>行内元素span居中</span>
</div>

垂直居中

1.父元素高度确定的单行文本(行内元素),可设置line-height等于父元素高度

<div style="height: 100px;">
    <span style="line-height: 100px;">坦克</span>
</div>

2.父元素高度确定的多行文本(行内元素)
方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align：middle( td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。)

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>父元素高度确定的多行文本</title>
    <style>
        .wrap {
            height: 300px;
            background: #ccc
        }
    </style>
</head>

<body>
<table>
    <tbody>
    <tr>
        <td class="wrap">
            <div>
                <p>看我是否可以居中。</p>
                <p>看我是否可以居中。</p>
                <p>看我是否可以居中。</p>
                <p>看我是否可以居中。</p>
                <p>看我是否可以居中。</p>
            </div>
        </td>
    </tr>
    </tbody>
</table>
<table>
    <tbody>
    <tr>
        <td class="wrap">
            <div>
             <img src="" title="图片"/>
            </div>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>

方法二:设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性

<div class="container" style="display:table-cell;vertical-align:middle;">
    <div>
        <p>坦克</p>
        <p>航母</p>
    </div>
</div>

块级元素居中

水平居中

1.定宽块状元素,设置左右margin值为auto

<div style="width: 300px;margin: 20px auto;">
         <p>坦克</p>
         <p>航母</p>
</div>

2.不定宽块状元素方法
方法一:加入table标签,table标签长度自适应性,即不定义其长度也不默认父元素body的长度(其长度根据其内文本长度决定),可以看做一个定宽的元素,然后利用定宽块状居中的margin方法,使其水平居中

<table style="margin: 20px auto;">
    <tbody>
    <tr>
        <td>
            <div>
               <p>坦克</p>
               <p>航母</p>
            </div>
        </td>
    </tr>
    </tbody>
</table>

方法二:改变块级元素的 display 为 inline类型(设置为行内元素显示),然后使用text-align:center来实现居中效果

<head>
    <meta charset="utf-8">
    <title>不定宽块状元素水平居中</title>
    <style>
        .container {
            text-align: center;
            border: 1px solid red;
        }
        .container ul {
            list-style: none;
           
            display: inline;
        }
        .container li {
            margin-right: 8px;
            display: inline;
        }
    </style>
</head>
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
</html>

方法三:通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>不定宽块状元素水平居中</title>
    <style>
        .container {
            float: left;
            position: relative;
            left: 50%
        }
        .container ul {
            list-style: none;
            margin: 0;
            padding: 0;
            position: relative;
            left: -50%;
        }
        .container li {
            float: left;
            display: inline;
            margin-right: 8px;
        }
    </style>
</head>

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
</html>

垂直居中

1.利用CSS属性transform:translate(x,y)

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>垂直居中</title>
    <style>
        .container {
            border:solid 1px red;
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }

    </style>
</head>
<body>
<div class="container">
    垂直居中
</div>
</body>
</html>

2.利用flex布局(不定高不定宽)

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>垂直居中</title>
    <style>
        .container {
            height:300px;
            display:flex;
            align-items:center;
            justify-content:center;
            border:1px solid #cc3f13;
        }

    </style>
</head>

<body>
<div class="container">
    <div style="border:solid 2px green;width: 100px;height: 100px;">垂直居中</div>
</div>
</body>
</html>

3.设置position:absolute或fiexed,另外margin设置为auto

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>垂直居中</title>
    <style>
        .container{
            width: 100px;
            height: 100px;
            border:solid 1px blue;
            position: absolute;/*或fixed*/
            /*上下居中*/
            top:0;
            bottom:0;
            /*左右居中*/
            left:0;
            right:0;
            margin: auto;
        }
    </style>
</head>

<body>
<div class="container">
    <span>居中</span>
</div>
</body>
</html>

垂直居中 html居中 css

安科网

CSS水平居中和垂直居中

renpinghao