前端水平垂直居中的方法

方法一：将line-height设置成和height一致，text-align: center;【仅适用于文字】

    <div>居中</div>

div {width: 100px;height: 100px;background-color: rgb(121, 196, 247);font-size: 20px;/*  水平居中 */text-align: center;line-height: 100px;}

方法二：使用flex弹性布局【文字和元素均适用】

设置 display:flex；justify-content：center；align-items：center；即可可垂直水平居中

div {width: 100px;height: 100px;background-color: rgb(146, 193, 224);display: flex;/* 主轴居中对齐 */justify-content: center;/* 侧轴居中对齐 */align-items: center;}

方法三：增加一个父元素,使用定位加位移（position和transform）【文字和元素均适用】

增加一个父元素（设置position: relative;），子元素（position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);），即可可垂直水平居中

    <div class="one"><div class="two">居中</div></div>

      .one {width: 500px;height: 500px;background-color: rgb(146, 193, 224);/* 设置绝对定位的元素 */position: relative;}.two {/* 设置相对定位的元素 */position: absolute;left: 50%;top: 50%;/* 利用transform属性，将其往左平移span自身长度的50%，往上平移span自身长度的50% */transform: translate(-50%, -50%);}

方法四：增加一个父元素,使用定位+margin: auto;【仅适用于元素】

.one {width: 300px;height: 300px;background-color: rgb(49, 134, 190);/* 设置绝对定位的元素 */position: relative;}.two {/* 设置相对定位的元素 */width: 100px;height: 100px;position: absolute;background-color: rgb(146, 170, 185);top: 0;left: 0;right: 0;bottom: 0;margin: auto;}

如有不同见解，欢迎讨论，更多情景，正在更新中。。。。。。

前端水平垂直居中的方法相关推荐

html脚本语言居中,web前端：CSS--几种常用的水平垂直居中对齐方法
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.css不仅可以静态地修 ...
[css] 写出div在不固定高度的情况下水平垂直居中的方法？
[css] 写出div在不固定高度的情况下水平垂直居中的方法? 我知道的有两种方法<!DOCTYPE html> <html><head><meta char ...
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法 flex布局:还有就是可以用定位也可以实现等等: flex:父div:{display:flex: justify-conten ...
CSS实现水平垂直居中的方法总结
在CSS-trick 上面有一篇很棒的博文介绍CSS中的水平垂直居中戳这里. 在这里我强烈推荐这篇文章的原因是:整篇文章的逻辑结构非常清晰.我之前也看过不少CSS实现垂直居中相关的博客,很多博客的总 ...
css实现文字或者div盒子水平垂直居中的方法
实现水平垂直居中的方法文本(文字)内容属于行内元素行内元素水平垂直居中方法方式一: 设置文字外层的盒子 text-align:center /*水平居中*/ height = 100px; /* ...
【面试题】CSS 中几种最常用的水平垂直居中的方法
目录 CSS 中几种最常用的水平垂直居中的方法一.使用 margin:auto 二.使用 position:absolute 三.使用弹性布局四.文本水平对齐和行高五.使用网格布局 CSS 中几 ...
文字居中、CSS中实现盒子水平垂直居中的方法
1. 文字居中: 第一种方式: 当用text-align:center时,达到的是水平居中的效果,那再用vertical-align:middle:其实是实现不了垂直居中的,此时就需要用到displa ...
html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法
Html5中新增标签与样式实现元素水平垂直居中的方法发布时间:2021-06-12 12:44:51 来源:亿速云阅读:71 作者:小新这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...
h5文字垂直居中_CSS中垂直居中和水平垂直居中的方法
flex垂直居中: 第一种:使用flex布局,让居中元素的父元素为flex属性,让它在交叉轴上center就可以达到居中效果了: html代码: <div class="father& ...