CSS:一个元素在一个容器中居中的方式

方法一:使用样式text-align: center;

方法二:使用样式margin: 0 auto;

方法三:使用display: flex布局;

方法四:使用绝对定位的方式

<div class="parent">
    <div class="child"></div>
</div>
.parent{
    position: relative;
    .child{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

垂直居中:

方法一:使用样式vertical-align: middle(需要是行内元素,往往伴随着display: inline-block; 同时往往需要对于存在多个子元素时生效,所以当只存在一个元素而又需要用这种方式实现效果时,往往需要使用伪元素:before :after);

方法二:使用display:flex布局;

方法三:使用绝对定位的方式

<div class="parent">
    <div class="child"></div>
</div>
.parent{
    position: relative;
    .child{
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
}

水平垂直居中,除了以上几种方式的结合之外,还可以通过以下几种方法实现:

方法一:使用display:table;display:table-cell;

方法二:使用display:flex布局

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

转载于:https://www.cnblogs.com/yiyiboy-core/p/9928646.html

CSS笔记

清除(clear)浮动效果

2020-2-5 19:55:47

CSS笔记

CSS——定位

2020-2-5 20:26:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索