元素居中的解决方案

最新推荐文章于 2023-01-12 16:06:01 发布

bailiang9872

最新推荐文章于 2023-01-12 16:06:01 发布

阅读量96

点赞数

原文链接：http://www.cnblogs.com/linyongqin/articles/7860142.html

版权

居中

1.水平居中

1.1 文本、图片等行内元素的水平居中

text-align: center;

1.2 确定宽度的块级元素的水平居中

方法一：

块级元素设置宽度，margin-left: auto; margin-right: auto;

方法二：

块级元素设置 position: relative; left: 50%; margin-left: -( 宽度 / 2 )px;

1.3 不确定宽度的块级元素的水平居中

方法一：

父元素设置 text-align: center ;

块级元素设置 display:inline-block;

方法二：

父元素设置 float: left; position: relative; left: 50%;

块级元素设置 float: left; position: relative; left: -50%;

方法三：IE 9 +

块级元素设置 position: absolute; left: 50%; transform:translateX(-50%);

transform:translateX(-50%); /*左边缘向左移动自身宽度的一半*/

不确定宽度块级元素

2.垂直居中

2.1 父元素高度不确定的文本、图片、块级元素的垂直居中

父元素设置相同的上下边距

2.2 父元素高度确定的单行文本的垂直居中

父元素 height 和 line-height 设置相同高度值

2.3父元素高度确定的多行文本、图片、块级元素的垂直居中

方法一：

父元素设置 display: table; /*此元素作为块级表格来显示*/

子元素设置 vertical-align: middle; display: table-cell; /*此元素作为块级单元格来显示*/

方法二：

父元素 position:absolute; top: 50%;

子元素 position:relative; top: -50%;

3.水平垂直居中

3.1 确定宽度高度的块级元素的水平垂直居中

方法一：

position:absolute; top: 50%;left: 50%; margin-top: -( 高度 / 2)px; margin-left: -( 宽度 / 2 )px;

多行文本

方法二：基于 Flexbox 解决方案

IE 11+

父元素设置 display: flex;

子元素设置 margin: auto;

3.2 不确定宽度高度的块级元素的水平垂直居中

IE 9+

position:absolute; top: 50%;left: 50%; transform:translate(-50%,-50%);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素居中的解决方案</title>
    <style type="text/css">
        *, *:after, *:before {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        * { zoom: 1; }

        * {margin: 0;padding: 0;}

        body { padding: 20px; }

        h1, h2, h3, h4, h5 { margin-top: 10px;}

        p { margin-top: 10px; }

        ul, li { list-style: none; }

        a {text-decoration: none; }

        .box {
            width: 500px;
            border: 1px solid #CCC;
            margin-top: 10px;
            overflow: hidden;
            position: relative;
        }
        .tc {
            text-align: center;
        }

        .bc {
            margin-left: auto;
            margin-right: auto;
        }
        .wrap{
            width: 500px;
            height: 200px;
            border: 1px solid #CCC;
            margin-top: 10px;
            position: relative;
        }
    </style>
</head>
<body>
<h1>元素居中的解决方案</h1>
<h2>1.水平居中</h2>

<h3>1.1 文本、图片等行内元素的水平居中</h3>
<p>text-align: center;</p>
<div class="box tc">文本</div>
<div class="box tc"><img src="images/1.jpg"/></div>

<h3>1.2 确定宽度的块级元素的水平居中</h3>
<h4>方法一：</h4>
<p>块级元素设置宽度，margin-left: auto; margin-right: auto;</p>
<div class="box">
    <div class="bc" style="width: 100px;height: 100px; background: greenyellow;"></div>
</div>
<h4>方法二：</h4>
<p>块级元素设置 position: relative; left: 50%; margin-left: -( 宽度 / 2 )px;</p>
<div class="box">
    <div class="bc" style="width: 100px;height: 100px; position: relative; left: 50%; margin-left: -50px; background: greenyellow;"></div>
</div>

<h3>1.3 不确定宽度的块级元素的水平居中</h3>
<h4>方法一：</h4>
<p>父元素设置 text-align: center ;</p>
<p>块级元素设置 display:inline-block;</p>
<style type="text/css">
    .list_1_3_1 li {
        display: inline-block;
    }

    .list_1_3_1 li a {
        display: block;
        padding: 5px;
        background: gold;
    }
</style>

<div class="box">
    <ul class="list_1_3_1 tc">
        <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li>
    </ul>
</div>

<h4>方法二：</h4>
<p>父元素设置 float: left; position: relative; left: 50%;</p>
<p>块级元素设置 float: left; position: relative; left: -50%;</p>
<style type="text/css">
    .list_1_3_2 {
        position: relative;
        left: 50%;
        clear: both;
        float: left;
    }

    .list_1_3_2 li {
        position: relative;
        left: -50%;
        float: left;
        display: inline-block;
    }

    .list_1_3_2 li a {
        display: block;
        padding: 5px;
        background: gold;
    }
</style>
<p></p>
<div class="box">
    <ul class="list_1_3_2">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</div>

<h4>方法三：IE 9 +</h4>
<p>块级元素设置 position: absolute; left: 50%; transform:translateX(-50%);</p>
<p>transform:translateX(-50%);  /*左边缘向左移动自身宽度的一半*/</p>
<div class="box" style="height: 100px;">
    <span class="bc" style="height: 100px;line-height: 100px; position: absolute; left: 50%;     -webkit-transform:translateX(-50%); transform:translateX(-50%);  background: greenyellow;">
        不确定宽度块级元素
    </span>
</div>

<h2>2.垂直居中</h2>

<h3>2.1 父元素高度不确定的文本、图片、块级元素的垂直居中</h3>
<p>父元素设置相同的上下边距</p>
<div class="box" style="padding: 20px 0;">文本</div>

<h3>2.2 父元素高度确定的单行文本的垂直居中</h3>
<p>父元素 height 和 line-height 设置相同高度值</p>
<div class="wrap" style="line-height: 200px;">文本</div>

<h3>2.3父元素高度确定的多行文本、图片、块级元素的垂直居中</h3>
<h4>方法一：</h4>
<p>父元素设置 display: table; /*此元素作为块级表格来显示*/</p>
<p>子元素设置 vertical-align: middle; display: table-cell; /*此元素作为块级单元格来显示*/</p>
<div class="wrap" style="display: table;">
    <div style="display: table-cell; vertical-align: middle;">多行文本</div>
</div>

<h4>方法二：</h4>
<p>父元素 position:absolute; top: 50%;</p>
<p>子元素 position:relative; top: -50%;</p>
<div class="wrap">
    <div style="position:absolute; top: 50%;">
        <div style="position:relative; top: -50%;">多行文本</div>
    </div>
</div>


<h2>3.水平垂直居中</h2>
<h3>3.1 确定宽度高度的块级元素的水平垂直居中</h3>
<h4>方法一：</h4>
<p>position:absolute; top: 50%;left: 50%; margin-top: -( 高度 / 2)px; margin-left: -( 宽度 / 2 )px;</p>
<div class="wrap">
    <div style="width:100px;height: 100px; position:absolute; top: 50%;left: 50%; margin-top: -50px; margin-left: -50px; background: greenyellow; ">多行文本</div>
</div>

<h3>方法二：基于 Flexbox 解决方案</h3>
<p>IE 10+</p>
<p>父元素设置 display: flex;</p>
<p>子元素设置 margin: auto;</p>
<div class="wrap" style="display: -webkit-box;    display: -ms-flexbox;    display: flex;">
    <div style="margin: auto; width: 100px; height: 100px;  background: greenyellow; ">多行文本</div>
</div>

<h3>3.2 不确定宽度高度的块级元素的水平垂直居中</h3>
<p>IE 9+</p>
<p>position:absolute; top: 50%;left: 50%; transform:translate(-50%,-50%); </p>
<div class="wrap">
    <div style="width:100px;height: 100px; position:absolute; top: 50%;left: 50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);  background: greenyellow; ">多行文本</div>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/linyongqin/articles/7860142.html

bailiang9872

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
元素居中的解决方案

居中1.水平居中1.1 文本、图片等行内元素的水平居中text-align: center;1.2 确定宽度的块级元素的水平居中方法一：块级元素设置宽度，margin-left: auto; margin-right: auto;方法二：块级元素设置 position: relative; left: 50%; margin-left:...
复制链接

扫一扫