css字体居中:CSS 设定div层内容居中-字体教程免费ppt模版下载-道格办公
投稿
  1. JustNews首页
  2. 字体教程
  3. CSS 设定div层内容居中

CSS 设定div层内容居中

作者: 道格办公 • • 字体教程 • 浏览量 992

一、position元素

第一种：通过 position + translateY

a：水平及垂直同时居中

.wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    border: solid 2px red;
    border-radius: 5px;
}
.wrapper .content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: 100px;
    width: 100px;
    border: solid 2px blue;
    border-radius: 5px;
}

b：水平居中

.wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    border: solid 2px red;
    border-radius: 5px;
}

.wrapper .content{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100px;
    width: 100px;
    border: solid 2px blue;
    border-radius: 5px;
}

c：垂直居中

.wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    border: solid 2px red;
    border-radius: 5px;
}

.wrapper .content{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 100px;
    width: 100px;
    border: solid 2px blue;
    border-radius: 5px;
}

第二种：通过 position + margin

a：水平及垂直同时居中

.wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    border: solid 2px red;
    border-radius: 5px;
}

.wrapper .content{
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 50%;
    margin-left: -50px;
    height: 100px;
    width: 100px;
    border: solid 2px blue;
    border-radius: 5px;
}

b：水平居中 

1 .wrapper {
 2     position: relative;
 3     width: 300px;
 4     height: 300px;
 5     border: solid 2px red;
 6     border-radius: 5px;
 7 }
 8 
 9 .wrapper .content{
10     position: absolute;
11     left: 50%;12     margin-left: -50px;
13     height: 100px;
14     width: 100px;
15     border: solid 2px blue;
16     border-radius: 5px;
17 }

c：垂直居中

.wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    border: solid 2px red;
    border-radius: 5px;
}

.wrapper .content{
    position: absolute;
    top: 50%;
    margin-top: -50px;
    height: 100px;
    width: 100px;
    border: solid 2px blue;
    border-radius: 5px;
}

二、元素内部信息

第一种：元素内容没有标签，只有内容，这样垂直设置height和line-height一样就可以了，水平设置text-align:center就可以

.wrapper{
     height: 50px;
     line-height: 50px;
     text-align: center;     
 }

第二种：元素内部元素居中，设置如下：

.wrapper-table{
    display: table-cell;
    height: 100px;
    width: 100px;
    vertical-align: middle;
    text-align: center;
    border: solid 2px yellow;
}

.wrapper-table .wrapper-table-cell{
    border: solid 2px #009900;
}

文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/CSS-she-ding-div-ceng-nei-rong-ju-zhong.html

赞 (810)
打赏 支付宝扫一扫 支付宝扫一扫
Lomu ︶￣Ｓs°╮ 专栏作者
48 196
single-end

相关推荐