CSS样式——div居中方法

2024-05-09 09:53:53

1、绝对居中

给div设置样式，div默认显示位置为body的左上方。

            width: 400px;height: 300px;background-color: orange;

如下图所示：

首先给div添加绝对定位，并设置上下左右边距为0，然后使用margin: auto;自动居中。

            position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;

结果如下所示：

2、水平垂直居中

给其父元素添加display: flex;弹性布局。
内容对齐（justify-content）属性：应用在弹性容器上，即父元素上。把弹性项沿着弹性容器的主轴线（main axis）对齐，如果横向有多个div，则X轴就为当前弹性容器的主轴线，Y轴为副轴线，反之亦然。

            display: flex;justify-content: center;align-items: center;

结果显示如下：

如果注释掉align-items: center;属性，元素则按照当前主轴X轴居中，由于给元素开启弹性布局，故主轴应为X轴，可设置两个div验证。

            display: flex;justify-content: center;/*align-items: center;*/

显示结果如下：

如果注释掉justify-content属性，使用align-items: center;属性，则居中对齐弹性盒的各项 <div> 元素，默认是沿着副轴Y轴居中，（上文提到过：由于给元素开启弹性布局，故主轴应为X轴）。

            display: flex;/*justify-content: center;*/align-items: center;

显示结果如下：

3、（定位+变形）居中

给父元素添加 position: relative;相对定位。

给自身元素添加position: absolute;绝对定位。

top: 50%;使自身元素距离上方“父元素的50%高度”的高度。

left: 50%;使自身元素距离上方“父元素的50%宽度”的宽度。

transform: translate(-50%,-50%);使自身元素再往左，往上平移自身元素的50%宽度和高度。

             position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);

显示结果如下：

CSS样式——div居中方法相关推荐

css样式-div居中
目录一.绝对定位居中二.水平垂直居中三.定位+变形居中一.绝对定位居中 1.新建了一个div,设置了默认样式 width: 100px;height: 100px;background-col ...
html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
php页面底部信息居中,css底部如何局中？css三种居中方法
本篇文章给大家带来的内容是关于css底部如何局中?css三种居中方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 某天组长让我改一个表格的样式,要求底部局中.当时想很简单的嘛,哼哧 ...
div居中方法（共8种）
水平居中 1.行级元素:为该行级元素的父元素设置text-align:center配合line-height样式 <div style="width: 500px;height: 10 ...
div居中方法（共9种）
div居中方法(共9种) 水平居中行级元素:为该行级元素的父元素设置text-align:center配合line-height样式 <div style="width: 500px ...
html div居中左对齐,div对齐 CSS实现DIV居中对齐 div居右对齐 div居左对齐
div对齐 CSS实现DIV居中对齐 div居右对齐 div居左对齐使用CSS浮动属性实现DIV各种对齐,比如DIV层左对齐,DIV居中对齐,DIV居右对齐等(DIV靠右居中靠左对齐介绍篇) 实 ...
HTML引入CSS样式三种方法及优先级
HTML引入CSS样式三种方法及优先级 CSS样式的写法 HTML引入CSS样式三种方法及优先级: 方法 css的样式引用由3种方式.分别为行内样式.内部样式(嵌入式)和外部样式: 行内样式: ...
CSS中各种各样居中方法的总结
在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...
CSS盒子模型居中方法，web前端开发教程视频
前言下面分享了一些关于腾讯,酷狗,字节(实习的)面试真题,让大家参考.大家也自己去收集整理其他的面试题,可以通过这些面试题,查看自己的不足,也可以了解自己想要去的公司容易出现的面试题,进行有针对性复 ...

最新文章

热门文章