css居中的几种方法_CSS几种常用的水平垂直居中对齐方法

文字的水平垂直居中

class="content"> <p>文字水平垂直居中p> </div>

.content{  width: 400px;  height: 100px;  border: #000000 solid 1px;}

当前效果：

.content{  width: 400px;  height: 100px;  border: #000000 solid 1px;  text-align: center;  line-height: 100px;}

文字水平垂直居中效果：

`元素的水平垂直居中`

class="content"> <div class="box">盒子居中div></div>

.content{    margin: 20px auto;    width: 300px;    height: 300px;    border: #000000 solid 1px;  }  .box{    width: 120px;    height: 120px;    line-height: 120px;    text-align: center;    background: red;  }

当前效果：

01使用绝对定位

.content{  position: relative;  margin: 20px auto;  width: 300px;  height: 300px;  border: #000000 solid 1px;}.box{  position: absolute;  top:0;  left: 0;  bottom: 0;  right: 0;  width: 120px;  height: 120px;  line-height: 120px;  margin: auto;  text-align: center;  background: red;}

居中效果：

02使用绝对定位+calc()

.box{  position: absolute;  top:calc(50% - 120px / 2);  left: calc(50% - 120px / 2);  width: 120px;  height: 120px;  line-height: 120px;  text-align: center;  background: red;}

居中效果：

03使用绝对定位+transform()

.box{  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  width: 120px;  height: 120px;  line-height: 120px;  text-align: center;  background: red;}

居中效果：

04使用CSS3弹性盒模型

/*作用于父元素*/.content{  display: flex;/*弹性布局*/  justify-content: center;/*水平居中*/  align-items: center;/*垂直居中*/  position: relative;  margin: 20px auto;  width: 300px;  height: 300px;  border: #000000 solid 1px;}.box{  width: 120px;  height: 120px;  line-height: 120px;  text-align: center;  background: red;}

居中效果：

扫码关注青春正当时

css居中的几种方法_CSS几种常用的水平垂直居中对齐方法相关推荐

html脚本语言居中,web前端：CSS--几种常用的水平垂直居中对齐方法
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.css不仅可以静态地修 ...
【面试题】CSS 中几种最常用的水平垂直居中的方法
目录 CSS 中几种最常用的水平垂直居中的方法一.使用 margin:auto 二.使用 position:absolute 三.使用弹性布局四.文本水平对齐和行高五.使用网格布局 CSS 中几 ...
CSS:仅对子盒子修饰样式，三种让其在父盒子中水平垂直居中的方法及其优缺点(父盒子宽高未知)
1.给父盒子相对定位,子盒子绝对定位,left,top,right和bottom,都设置为0: position: absolute; left: 0; right: 0; top: 0; botto ...
文字居中、CSS中实现盒子水平垂直居中的方法
1. 文字居中: 第一种方式: 当用text-align:center时,达到的是水平居中的效果,那再用vertical-align:middle:其实是实现不了垂直居中的,此时就需要用到displa ...
[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水平垂直居中常见方法总结(转）
文章目录一.简介二.元素水平居中三.元素水平垂直居中 3.1 position 元素已知宽度 3.2 position transform 元素未知宽度 3.3 flex布局 3.4 table ...

css居中的几种方法_CSS几种常用的水平垂直居中对齐方法

文字的水平垂直居中

`元素的水平垂直居中`

css居中的几种方法_CSS几种常用的水平垂直居中对齐方法相关推荐

最新文章

热门文章