css实现div水平垂直居中：竖排居中，横排居中

write-mode实现文字竖排并居中

参考：css实现文字纵向排版并且水平垂直居中

<div class="title-div">实时故障信息</div>


.title-div{height: 100%;width:70px;font-size: 20px;writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/writing-mode: tb-rl; /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/text-align: center;display: flex;flex-direction: column;-webkit-display:flex;justify-content: center;border:1px solid black;background-color: red;
}

div文字横排居中

                <div class="info-div"><div class="no-info-tip" v-if="noFaultFlag">全网运行良好，无故障</div><div class="fault-info-item" v-for="item in faultData">......</div></div>

.info-div{height: 100%;width:calc(100% - 50px);margin-left:10px ;border:1px solid black;.no-info-tip{position:relative;top:50%;left:50%;transform: translate(-50%,-50%);text-align: center;}}

这里.no-info-tip的position:relative；而我之前看到的一个视频写的是absolute，当我写absolute时，文字就飘走了，看不见。补充一下absolute说明：找出定位元素父元素链上的所有父元素，由近到远哪个元素不是默认定位（即static定位）的，那么就相对于它进行定位。定位元素会释放原来所占的位置，其他元素会补充进来，好似float属性让其漂浮起来一样。当父元素链上所有父元素都是默认定位，那么absolute定位就是相对于body元素的，效果和fixed定位差不多。

其他方法：

我在CSS中4种快捷居中DIV的方法看到的4种方法：

Flex layout：
在父容器内添加以下样式:
display: flex;
justify-content: center;
align-items: center;
Margin auto：
在子容器内添加以下样式:
margin: 0 auto;
Text-align和Inline-block：
在父容器内添加以下样式:
text-align: center;
在子容器内添加以下样式:
display: inline-block;
2D Transform
在子容器内添加以下样式:
position: absolute; //我用的relative
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

css实现div水平垂直居中：竖排居中，横排居中相关推荐

前端面试系列-CSS基础-div水平垂直居中文本居中(单行文字、多行文字)
文章目录一.div水平垂直居中 1.flex 2.position (元素已知宽高) 3.position transform (元素未知宽高度) 4.position(元素已知宽度)maigin: ...
html div 水平垂直居中显示,利用CSS实现div水平垂直居中
实现居中的方案有很多,这里介绍下纯CSS使用absolute配合margin的方案. 1. p宽高固定width: 400px; height: 200px; position: absolute; ...
CSS 实现DIV水平垂直居中(一)
文章目录 CSS 实现DIV水平居中方法一方法二方法三方法四方法五 CSS 实现DIV水平居中以下介绍五种CSS实现DIV水平居中的方法,首先准备两个DIV,演示五种不同的方式实现DIV水 ...
如何让div水平垂直居中
如何让div水平垂直居中 @(css)[妙瞳] 引子我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE h ...
CSS中实现水平/垂直居中
CSS中实现水平/垂直居中在CSS中实现水平居中相对简单,但是却没有一个明确的属性表示这是实现垂直居中的,这就导致垂直居中的实现相对初学者来说难上许多.但是在实际的开发中垂直居中的需求常常出现,例如 ...
CSS实现元素水平垂直居中的各种方法
关于 CSS 如何将元素进行水平垂直居中的几种常用方法前言在设计网页页面的过程中,总会有将元素或者文字进行水平或者垂直居中的要求,各种CSS样式调整,搞的头都大了.这里将会介绍 CSS 中几种常用 ...
div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法文章目录学习笔记(一) 前言一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四二.flex布局法 1.方法五三.将小div转成行内块 ...
关于DIV嵌套（二）：div嵌套div水平垂直居中
div嵌套div水平垂直居中可以使用position定位来实现,这是最常用的方法. <!DOCTYPE html> <html><head><meta cha ...
让div水平垂直居中的六种方法
** 方法一:绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;) ...

css实现div水平垂直居中：竖排居中，横排居中

write-mode实现文字竖排并居中

div文字横排居中

其他方法：

css实现div水平垂直居中：竖排居中，横排居中相关推荐

最新文章

热门文章