一、绝对定位居中

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.效果如下：

css样式-div居中相关推荐

CSS样式——div居中方法
1.绝对居中给div设置样式,div默认显示位置为body的左上方. width: 400px;height: 300px;background-color: orange; 如下图所示: 首先给d ...
html div居中左对齐,div对齐 CSS实现DIV居中对齐 div居右对齐 div居左对齐
div对齐 CSS实现DIV居中对齐 div居右对齐 div居左对齐使用CSS浮动属性实现DIV各种对齐,比如DIV层左对齐,DIV居中对齐,DIV居右对齐等(DIV靠右居中靠左对齐介绍篇) 实 ...
html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
html div布局位置横,div位置布局 CSS实现DIV居中对齐 div居右对齐 div居左对齐
使用CSS浮动属性实现DIV各种对齐,比如DIV层左对齐,DIV居中对齐,DIV居右对齐等(DIV靠右居中靠左对齐介绍篇) 实现DIV对齐用到关键属性有两个,一个为float一个为margin. ...
html css样式div属性,div css
DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是 ...
php控制 css样式,div css样式控制案例
摘要:html> div -css样式控制案例 #box{width:100px; height: 100px; html> div -css样式控制案例 #box{width:100px ...
html css分块,web学习第二课，HTML+CSS样式+div分块
---博客静态网页(项目实例) 今天我们需要完成的项目实例是一个带有图片的静态网页,区域布局分明. 做一个静态网页的步骤顺序: 网站整体布局分析设计导航与Banner的实现左侧列表的实现主体内容 ...
使用css使div居中显示
本例以vue为例,使用text-align: center 和margin:0 auto;实现div居中显示 1.html代码 <template> <div class=&qu ...
css中div居中显示的四种方法
css中设置div元素居中显示的四种方法一.先确定div的基本样式二.具体实现方法第一种:利用子绝父相和margin: auto实现第二种:利用子绝父相和过渡动画tranform实现第三种: ...

css样式-div居中

一、绝对定位居中

二、水平垂直居中

三、定位+变形居中

css样式-div居中相关推荐

最新文章

热门文章