元素水平垂直居中--分为行内元素和块级元素的情况

最新推荐文章于 2024-03-06 09:03:31 发布

abc12310232006

最新推荐文章于 2024-03-06 09:03:31 发布

阅读量139

点赞数

原文链接：http://www.cnblogs.com/baojinjin/p/9141998.html

版权

直接上code：

HTML文档

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>居中设置</title>
    <link href="../css/居中设置.css" rel="stylesheet" />
</head>
<body>
    <h1>居中样式</h1>
    <p>行内元素和块级元素的垂直居中、水平居中都不一样</p>
    <hr />
    <h2>两个块级元素怎么垂直水平居中</h2>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <br />

    <div class="box3">
        <div class="box4"></div>
    </div>
    <br />

    <div class="box1">
        <div class="box6"></div>
    </div>
    <br />
    <h3>对于块级子元素宽高未知的情况下</h3>
    <div class="box7">
        <div class="box8"></div>
    </div>
    <br />
    <div class="box9">
        <div class="box10"></div>
    </div>

    <br />
    <h2>内联元素和行内块元素的居中设置</h2>
    <p>注意：内联元素(行内元素)不能设置宽高</p>
    <div class="box11">
        <a href="##">这是一条用来上下左右居中的链接--请勿点击</a>
    </div>
    <br />
    <div class="box12">
        <img src="../images/config.png" alt="Alternate Text" />
    </div>
    <br />
    <div class="box11">
        <p>可以将那些行内元素转换为块级元素，这样利用块级元素设置水平垂直居中</p>
    </div>
    <br />

    <h2>来看看img元素</h2>
    <p>
        img属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。类似的元素还有input等。
        行内非替换元素，例如, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和padding left、right改变宽度。
    </p>
    <div class="box11">
        <img src="../images/config.png" alt="Alternate Text" />
    </div>
    <br />
    <div class="box13">
        <img src="../images/config.png" alt="Alternate Text" />
    </div>
    <br />
    <div class="box14">
        <img src="../images/config.png" alt="Alternate Text" />
    </div>
</body>
</html>

　　css样式：

body {
    padding:0px;
    margin:0px;
}

/*第一种方法将位置都写死了，有的时候很不方便*/
.box1{
    width:200px;
    height:200px;
    background-color:#e0cbcb;
    position:relative;
}
.box2 {
    width: 50px;
    height: 50px;
    background-color: red;

    /**margin设置的时候只能水平居中，不能做到垂直居中*/
    /*margin: 0 auto; */

    /*使用定位进行水平垂直居中*/
    position: absolute;
    top: 50%;
    left:50%;
    /*向上移动自身高度的一半*/
    margin-top:-25px;

    /*向左移动自身宽度的一半*/
    margin-left:-25px;
}

/*第二种方法，利用css3的transform属性*/
/*这个方法比较方便*/
.box3 {
    width: 200px;
    height: 200px;
    background-color: #e0cbcb;
}
.box4{
    width:50px;
    height:50px;
    background-color:red;
    position:relative;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}

/*第三种方法*/
/*position: absolute; left: 0; right: 0; top: 0; bottom: 0;这是自动填充父元素的可用空间。然而给子元素设定了宽高，那么多余的空间，会被margin：auto平均分配。*/
.box6 {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin:auto;
}

/*第四种方法*/
/*利用表格的特性，将子元素看成行内元素，实现元素中的文字(文字可以是单行的，也可以是多行的)或图片水平垂直居中*/
.box7 {
    width:100px;
    height:100px;
    background-color:red;
    display:table;
}
.box8 {
    background-color: yellow;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

/*第五种方法,强烈推荐这种计算*/
/*弹性布局 display: flex。在已知或未知元素宽高的情况下，都能使元素居中显示。*/
.box9 {
    width: 100px;
    height: 100px;
    background-color: red;
    display: flex;

    /*align-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式。*/
    align-items: center;
    /*内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。*/
    justify-content: center;
}
.box10 {
    width: 30px; /*宽度可以省略*/
    height: 30px; /*高度可以省略*/
    background-color:yellow;
}

/*第六种方法：一般情况行内元素的水平垂直居中，将样式写在父元素就行*/
.box11{
    width:100%;
    height:100px;
    background-color:#000000;
    color:white;
    text-align:center;      /*行内元素水平居中*/
    line-height:100px;      /*行内元素垂直居中*/
}
.box11>a{
    color:white;
    text-decoration:none;
}

/*第七种方法：img元素有点特殊，它并不是单纯的行内元素，可以设置宽高*/
.box12 {
    width: 100%;
    height: 100px;
    background-color: #000000;
    text-align:center;      /*img元素可以居中*/
    line-height:140px;     /*这里需要进行调整，因为img元素对齐的方式有点不一样*/
}
.box12>img{
    width:50px;
}

/*第八种方法：行内元素转成块级元素*/
/*可以将图片转换为块级元素，然后利用块级元素进行调整*/
.box11 > img {
    /*img只设置宽高中的一个属性，另一个会自动调整成原来比列，保证不变形*/
    /*单位是%的话，会根据父元素进行调整*/
    height: 50%;
    display: block;
    /*第二种方法*/
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

/*第九种方法：父元素使用display:table-cell*/
/*这个方法十分方便快捷，可以放心使用*/
.box13 {
    width: 500px;
    height: 150px;
    background-color: antiquewhite;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.box13>img{
    height:50%;
}

/*第十种方法：给div设置text-align,给img设置transform，这样也能居中*/
.box14 {
    width: 500px;
    height: 150px;
    background-color: antiquewhite;
    text-align:center;
}
.box14 > img {
        height: 50%;
        /*vertical-align:150px;   这句话放在这没有起到作用*/

        /*可以使用margin-top调整垂直位置，但是比较死板*/

        /*margin-top:50px;*/
        /*使用transform沿着Y轴移动50%，就能够垂直居中*/
        transform:translateY(50%);
    }

　　这里只尝试了div包一个div、div包一个img元素这两种情况，后续学习div包一个input的情况！

转载于:https://www.cnblogs.com/baojinjin/p/9141998.html

abc12310232006

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素水平垂直居中--分为行内元素和块级元素的情况

直接上code：HTML文档<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>居中设置</title> <link href="../css/居中设置.css" rel="stylesheet...
复制链接

扫一扫