css样式-div居中

最新推荐文章于 2023-09-20 13:51:42 发布

luvJie-7c

最新推荐文章于 2023-09-20 13:51:42 发布

阅读量4.6k

点赞数

分类专栏： CSS 文章标签： css 前端 html 后端 javascript

本文链接：https://blog.csdn.net/qq_45978154/article/details/126290530

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、绝对定位居中

二、水平垂直居中

三、定位+变形居中

一、绝对定位居中

1.新建了一个div，设置了默认样式

		width: 100px;
		height: 100px;
		background-color: aqua;

2.效果如下：

3.然后给这个div设置绝对定位

        width: 100px;
        height: 100px;
        background-color: aqua;
        position: absolute;//绝对定位
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;//自动居中

4.效果如下：

二、水平垂直居中

1.在父元素上添加弹性布局及内容对齐属性，在上面div样式的基础上

		display: flex;//弹性布局
        //设置同一行子元素在X轴的对齐方式
		justify-content: center;//排列在当前行的中间位置
        //设置同一行子元素在Y轴的对齐方式
		align-items: center;//排列在当前行的中间位置

justify-content的参数：

属性值	描述
flex-start	排列在当前行的最左边
flex-end	排列在当前行的最右边
center	排列在当前行的中间位置
space-between	间距相等排列，两边不留白
space-around	间距相等排列，两边留白等于间距的一半

align-items的参数：

属性值	描述
flex-start	排列在当前行的最上方
flex-end	排列在当前行的最下方
center	排列在当前行的中间位置
stretch	当子元素没有设置高度或为auto,将占满整个容器的高度
baseline	以子元素第一行文字的基线对齐

align-content的参数

属性值	描述
flex-start	排列在当前列的最上方
flex-end	排列在当前列的最下方
center	排列在当前列的中间位置
space-between	间距相等排列，上下不留白
space-around	间距相等排列，上下留白等于间距的一半

三、定位+变形居中

1.给父元素添加相对定位，自身元素添加绝对定位，自身元素与父元素的距离自行设置

子元素

		width: 100px;
		height: 100px;
		background-color: aqua;
		position: absolute;//相对定位
		top: 50%;
		left: 50%;
        //变形
		transform: translate(-50%,-50%);//自身元素移动

父元素

		display: flex;//弹性布局
        //设置同一行子元素在X轴的对齐方式
		justify-content: center;//排列在当前行的中间位置
        //设置同一行子元素在Y轴的对齐方式
		align-items: center;//排列在当前行的中间位置

transform的参数：

2.效果如下：