html页面内容上下左右居中,HTML元素水平垂直居中实现方式(每天一个知识点)...
在前端页面开发中,HTML元素水平垂直居中是需要经常处理的问题,今天我们就来系统的学习一下如何在HTML实现水平垂直居中,通过对主流水平垂直居中实现方式的实践,来找到适合特定情况下的布局实现方式,并逐步达到灵活运用的水平。
水平居中
方式一: text-aligin:center(仅限行内元素)
text-align属性定义行内元素(例如文字)如何相对它的块父元素对齐。当其值为center时可以领行内元素居中对齐。
.box1{
width: 200px;
height: 200px;
background-color: orange;
text-align: center;
}
一段用于演示的文字
方式二:margin:0 auto
margin用来设置一个块元素的偏移量,其值有四个参数,分别代表:上、右、下、左四个方向的偏移量(顺时针)。其值可以简写为两个,第一个值代表上下两侧的偏移量,第二个值代表左右两侧的偏移量,当我们给左右两侧的偏移量设置为auto时,代表我们让浏览器自己选择一个合适的偏移量,这样就能实现左右水平居中。
.box2{
width: 75%;
background-color: lime;
margin:0 auto;
}
一段用于演示的文字
方式三:基于relative布局实现水平居中
我们可以通过将一个元素设置为浮动元素,然后将其定位设置为relative,将其子元素的定位也设置为relative。然后将父元素的left值设置为50%,将其向右移动50%的距离,接着我们给子元素设定left值为-50%使其向反向向移动自身位置的50%,这样同样可以实现居中效果。
.box3 {
float: left;
position: relative;
left: 50%;
}
.box4 {
position: relative;
left: -50%;
}
一段用于演示的文字
方式四:基于Flex实现水平居中(移动端首选)
基于flex实现水平居中很简单,只需要将justify-content属性设定为center即可。由于flex是一个响应式布局,是移动端跨端页面开发的首选,因此非常建议移动端开发的小伙伴以这种方式实现水平布局。
一段用于演示的文字
.box5{
display: flex;
justify-content: center;
}
方式五:父元素开启相对定位,子元素开启绝对定位
我们还可以通过给父元素开启相对定位,并给子元素开启绝对定位,来实现水平居中,具体实现方式如下:
一段用于演示的文字
.box6{
position: relative;
}
.box7{
width: 80%;
position: absolute;
background-color: pink;
left:0;
right: 0;
margin:0 auto;
}
垂直居中
方式一:单行文字实现水平居中
单行文字实现水平居中是我们在前端页面开发中常常遇到的一种情况,这种情况比较特殊,这里我们首先介绍。在一个块元素中,如果只有一行文字,我们只需将line-height参数设置为与当前容器的高度一致即可,代码如下:
一段用于演示的文字
.box1{
height: 80px;
line-height: 80px;
}
方式二:基于Flex实现垂直居中
基于flex实现垂直居中同样很简单的,只需要设置align-items:center即可,代码如下:
.box1 {
display: flex;
width: 100%;
height: 800px;
background-color: lightskyblue;
/* 设置元素垂直排列 */
align-items: center;
}
.boxinner1 {
height: 100px;
width: 100px;
background-color: gray;
}
方式三:基于Table布局模式
我们可以将父元素的display属性设置为table,然后将子元素的display设置为table-cell,然后设置vertical-align:middle;来实现子元素的垂直布局。
一段用于演示的文字
.outer {
width: 100%;
height: 100px;
display: table;
}
.inner {
display: table-cell;
vertical-align: middle;
}
这种垂直方向实现居中的缺陷在于父元素需要指定宽度。
方式四:absolute定位+transform
我们可以将父元素的position属性设置为relative,然后将子元素的属性设置为absolute,子元素就会相对于父元素进行定位,然后我们将子元素的top属性设置为50%,这时候子元素相对于父元素顶部的距离为父元素高度的50%,然后我们还需要将元素本身向上移动自身高度的50%,我们可以使用transform实现。
一段用于演示的文字
.outer {
height: 100px;
position: relative;
background-color: lime;
}
.inner {
position: absolute;
top:50%;
transform: translate(0,-50%) ;
}
实现水平垂直居中的方式有很多,每个实现的方式都有自己的缺点或有点,比如我们将元素设置为浮动时会遇到高度塌陷的问题,而使用flex布局则会在老的IE浏览器存在兼容性问题。因此我们需要根据我们的使用场景灵活选择,争取找到实现方式中的最优解!
html页面内容上下左右居中,HTML元素水平垂直居中实现方式(每天一个知识点)...相关推荐
- html小知识之使页面内容整体居中(水平居中或垂直居中)
1.页面内容水平居中的办法, 方法一: ①最外层的div设定它最大的宽度为1200px(可根据情况调整) ②最外层div样式设置为,margin-left:auto;margin-right:auto ...
- css实现元素水平垂直居中——6种方式
实现元素水平垂直居中的方式: 利用定位+margin:auto 利用定位+margin:负值 利用定位+transform table布局 flex布局 grid布局 利用定位+margin:auto ...
- html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法
Html5中新增标签与样式实现元素水平垂直居中的方法 发布时间:2021-06-12 12:44:51 来源:亿速云 阅读:71 作者:小新 这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...
- js、css分别实现元素水平垂直居中
js实现元素水平垂直居中.css实现元素水平垂直居中 css实现元素水平垂直居中[4行代码] js实现元素水平垂直居中[弄巧成拙] css实现元素水平垂直居中[4行代码] #div{top:50%;l ...
- CSS文字或元素的水平垂直居中多种方式(简单明了)
前言:水平居中,我们可以很容易想到使用text-align实现文字水平居中,使用margin:0px auto;可以实现元素水平居中:所以重点将是怎么实现文字和元素的垂直居中?? --- 本文将通过举 ...
- 元素水平垂直居中的六种方式
文章目录 前言 代码预设 一.绝对定位 + transform 二.绝对定位 + margin 1.不用子盒子的宽高 2.需要子盒子的宽高 三.table-cell 属性 四.flex 布局 五.ca ...
- CSS中实现div元素水平垂直居中
常用7种实现水平垂直居中方法: 1.行内元素水平垂直居中 2.绝对定位 + margin 3.绝对定位+margin:auto 4.绝对定位 + translate 5.flex 布局 6.flex+ ...
- 元素水平垂直居中的几种常用方法
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>元素水 ...
- CSS Transform让百分比宽高布局元素水平垂直居中
CSS Transform让百分比宽高布局元素水平垂直居中 很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高 ...
- 块级、行内元素水平垂直居中方法
块级.行内元素水平垂直居中方法 块级元素水平垂直居中 // 为目标元素设置以下属性 position: absolute; /*top: 0;*/ left: 0; right: 0; bottom: ...
最新文章
- 进程和线程你真的搞懂了吗?
- 用到lucene的爬虫的简单实现
- SAE取消每日免费云豆赠送机制
- C语言实现上三角蛇形矩阵不用数组,C/C++编程笔记:C++ 嵌套循环,含循环打印及蛇形矩阵实例...
- Java笔记-字符串编码与解码以及编码表原理
- PCB相关的基础知识
- html5善于盒模型定位,2个小时上手html+css-003盒模型和定位
- sitemesh3.0的配置以及在静态html中的使用
- 计算机三级之嵌入式系统学习笔记4
- CCF201403试题
- linux 6.5 :qw,rhel 6.5替换centOS6的网易yum源
- leetcode(153)寻找旋转排序数组中的最小值
- 【论文】动态贝叶斯网络用于时序建模及动作分类
- 小米路由php5.6,MT7621超频1100Mhz,带小米路由器3G/小米AC2100/红米AC2100固件下载
- 2021-10-31
- android Holo UI框架,Holo风格的开源中国Android客户端——持续更新(2)
- base64编码计算机网络,【MIME协议】base64编码与quoted-printable编码
- laravel 路由_简单的Laravel路由
- 我的世界JAVA会支持光追吗_光线追踪改变了「我的世界」,华硕ROG2060S显卡的光追体验...
- C\C++中getchar()函数