css-元素居中

最新推荐文章于 2022-08-15 10:52:55 发布

LiXSnow

最新推荐文章于 2022-08-15 10:52:55 发布

阅读量212

点赞数

CSS居中问题：块级元素和行级元素在水平方向以及垂直方向的居中问题

元素的居中问题是每个初学者碰到的第一个大问题，在此我总结了下各种块级行级水平垂直的居中方法，并尽量给出代码实例。

首先请先明白块级元素和行级元素的区别

块级元素

块级元素水平居中

1：margin: 0 auto

element {
   margin: 0 auto;
}

2：负边距+绝对定位

.outside {
    width:500px;
    height:200px;
    background-color: red;
    margin:100px auto;
    position: relative;
}
.inner {
    width: 100px;
    height:50px;
    background-color: yellow;
    position: absolute;    //  绝对定位
    left:50%;              //     +
    margin-left: -50px;      //  负边距

3：弹性盒子flexbox：

.outside {
    width:500px;
    height:200px;
    background-color: red;
    margin:100px auto;
    position: relative;
    display: flex;           // 父元素display:flex;
    justify-content: center;  // 主轴上居中对齐
}
.inner {
    background-color: yellow;
    height:100px;
    width: 50px;
}

块级元素垂直居中（元素高度已知）：

1：利用负边距+绝对定位

  .outside {
        width:720px;
        height: 720px;
        margin: 0 auto ;
        position: relative; /*祖先元素的非static定位*/
    }
    .inner {
        width: 350px;
        height: 350px;
        position: absolute;
        top: 50%; /*元素相对其最近的position属性不为static的元素(祖先元素)移动50%，top、right、bottom 和 left 属性指定定位元素的位置。*/
        margin-top: -175px; /*元素向上移动自身的50%，此时，正好垂直居中*/
    }

2. 弹性盒子flexbox：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
        .outside {
            width:300px;
            height: 200px;
            margin:100px auto;
            background-color: red;
            display: flex;            // 弹性盒子
            align-items: center;      // 弹性盒子
        }
        .inner {
            width:50px;
            height: 30px;
            background-color: yellow;
        }
    </style>
</head>
<body >
 <div class="outside">     
     <div class="inner">
         inner
     </div>
 </div>
</body>
</html>

3. 绝对定位+父元素position非static+子元素transform

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
        .outside {
            width:300px;
            height: 200px;
            margin:100px auto;
            background-color: red;
            position: relative;              // 父元素非static
        }
        .inner {
            width:50px;
            height: 30px;
            background-color: yellow;
            position: absolute;
            top:50%;
            transform: translateY(-50%);    // 相对于自身高度，向上移动50%
        }
    </style>
</head>
<body >
 <div class="outside">     
     <div class="inner">
         inner
     </div>
 </div>
</body>
</html>

块级元素垂直居中（元素高度未知）：

1. position:absolute + transform属性

利用transform的translate()或translateY()方法

1 <!--Html 代码-->
2 <div class="outside">
3     <div class="inner">
4     </div>
5 </div>

 1  /*Css 代码*/
 2     .outside {
 3         background-color: #5555ee;
 4         width:720px;
 5         height: 720px;
 6         margin: 0 auto ;
 7         position:relative;
 8         
 9     }
10     .inner {
11         width: 350px;
12         height: 350px;
13         background-color: #ee5555;
14         position: absolute;
15         top:50%;/*相对祖先元素向下移动50%*/
16         transform: translateY(-50%);/*元素y轴移动自身的一半*/
17         transform: translate(,-50%);/*元素y轴移动自身的一半,与上一行效果相同*/
18     }

2 position:absolute + margin-top:auto + margin-bottom:auto

利用上边距，下边距在垂直方向的auto

<head>
    <style type="text/css">
     .outside {
         width: 300px;
         height: 300px;
         background-color: red;
         margin: 60px auto;
         position: relative;
     }
     .inside {
         width: 150px;
         height: 150px;
         background-color: black;
         position: absolute;  首先是父元素与子元素的position属性值要“配套”好，这样子元素的top,bottom才可以发挥应有的作用
         top:30px;
         bottom:30px;        当垂直方向上的margin为auto时，不论是margin-left，margin-right,还是margin:auto, auto总是会试图充满整个父元素，
         margin: auto 4px;   30px,30px,auto的“配合”是此方法有效果的关键所在。子元素被要求拉伸到top:30px;bottom:30px;(两个值必须一样，这样才居中)，但因为高度被固定而做不到这一点，所以margin:auto;就让它居中了。
     }                       
    </style>
</head>
<body>
    <div class="outside">
       <div class="inside"></div>
    </div>
</body>

3 flexbox弹性盒子

<!--Html 代码-->
<div class="outside">
    <div class="inner">
    </div>
</div>

3.1 设置direction:row或是direction:columns

.outside {
    display: flex;
    flex-direction: column;
    /*主轴方向设为垂直方向*/
    justify-content: center;
    /*主轴方向上的元素的对齐方式*/
}
.outside {
    display: flex;
    flex-direction: row;
    /*默认主轴方向就是row*/
    align-items: center;
    /*交叉轴上的元素的对齐方式*/
}

3.2 目前来说最简单的方法：

.outside {
    display: flex;
}

.inner {
    margin: auto;
}

二行级元素

水平居中：

    {
        text-align: 
    }

垂直居中：

(The End)

分类: HTML&CSS

好文要顶关注我收藏该文

oneplace
关注 - 7
粉丝 - 4

+加关注

currentDiggType = 0;

» 下一篇：块级元素行级元素及其他元素

posted on 2016-03-10 23:48 oneplace 阅读(2903) 评论(0) 编辑收藏

刷新评论刷新页面返回顶部

注册用户登录后才能发表评论，请登录或注册，访问网站首页。

最新知识库文章:

· 如何提升你的能力？给年轻程序员的几条建议
· 程序员的那些反模式
· 程序员的宇宙时间线
· 突破程序员思维
· 云、雾和霭计算如何一起工作

» 更多知识库文章…

fixPostBody(); setTimeout(function () { incrementViewCount(cb_entryId); }, 50); deliverAdT2(); deliverAdC1(); deliverAdC2(); loadNewsAndKb(); loadBlogSignature(); LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid); GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate, cb_postType); loadOptUnderPost(); GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);

LiXSnow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-元素居中

CSS居中问题：块级元素和行级元素在水平方向以及垂直方向的居中问题元素的居中问题是每个初学者碰到的第一个大问题，在此我总结了下各种块级行级水平垂直的居中方法，并尽量给出代码实例。首先请先明白块级元素和行级元素的区别块级元素块级元素水平居中&nbsp;1：margin: 0...
复制链接

扫一扫