代码改变世界

css居中问题

2020-03-30 15:56  默默不语  阅读(198)  评论(0)  编辑  收藏  举报

1.水平居中-行内元素-父级为行内元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #father{
                width: 500px;
                height: 500px;
                background-color: #0000FF;
                /* 若该元素不为块级元素，则把这个元素当作块级元素处理 */
                display: block;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <span id="father">
            水平居中-行内元素-父级为行内元素
        </span>
    </body>
</html>

实现效果：

 

 2.水平居中-行内元素-父级为块元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>居中实例</title>
        <style type="text/css">
            #father{
                width: 500px;
                height: 500px;
                background-color: #0000FF;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!-- 行内元素 -->
        <!-- 且父元素为块级元素 -->
        <div id="father">
            <span id="son">
                水平居中-行内元素-父级为块元素
            </span>
        </div>
        
        
        
        
    </body>
</html>

 

实现效果：

 

 

3.水平居中-块级元素-子元素为定宽

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #father{
                width: 500px;
                height: 500px;
                background-color: #0000FF;
            }
            #son{
                background-color: #FF0000;
                /* 间接的通过左右外边距自动挤出来一个居中的效果 */
                margin: 0 auto;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <!--如果子元素为块级元素，想要有包裹效果，父级元素必须是块级元素  -->
        <div id="father">
            <div id="son">
                水平居中-块级元素-子元素为定宽
            </div>
        </div>
    </body>
</html>

 

 

 

实现效果：

 

 

 

4.水平居中-块级元素-子元素为不定宽

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #father{
                width: 500px;
                height: 500px;
                background-color: #0000FF;
                text-align: center;
            }
            #son{
                background-color: #FF0000;
                /* 间接的通过左右外边距自动挤出来一个居中的效果 */
                display: inline;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <div id="son">
                水平居中-块级元素-子元素为不定宽
            </div>
        </div>
    </body>
</html>

 

 

 

实现效果：

 

 

5.垂直居中-行内元素-单行

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #father{
                width: 500px;
                height: 500px;
                background-color: #0000FF;
            }
            #son{
                background-color: #DC143C;
                /* 如果只有一行可以取巧，设置文本行高等于父容器的高度 */
                line-height: 500px;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <span id="son">
                我是单行的行内元素
            </span>
        </div>
    </body>
</html>

 

 

 

实现效果

 

 

 

6.垂直居中-行内元素-多行/垂直居中-块级元素

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #father{
                width: 500px;
                height: 500px;
                background-color: #0000FF;
                /* 把父元素当作table中的一个格子 */
                display: table-cell;
                /* 单行也可以使用这种方式 */
                vertical-align: middle;
            }
            #son{
                background-color: #DC143C;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <span id="son">
                我是多行的行内元素
            </span>
        </div>
    </body>
</html>

 

 

 

实现效果：