text文字垂直居中_CSS垂直居中,你会多少种写法?
来源 | https://wintc.top/article/4
CSS控制居中是前端开发中非常常用的布局技能,本文列出几种CSS控制元素居中的几种方法。谈及HTML元素居中展示,涉及到水平居中和垂直居中,以及水平垂直居中。由于HTML文档流是水平方向的,所以水平方向上的布局控制比垂直方向要简单很多,居中也是如此。不过(水平)垂直居中还是有很多种写法,至少一只手是数不过来了,本文列出几种,并进行了简单比较。
一、水平居中
使用CSS控制水平居中很简单:
- 块级元素 设置width,并设置margin auto
- 内联元素 父元素设置text-align center
HTML代码如下:
1、块级元素水平居中
.container { height: 300px; width: 300px; border: 1px solid red;}.content { width: 10rem; border: 1px solid green; margin: 0 auto;}
效果:
2、内联元素水平居中
.container { height: 300px; width: 300px; border: 1px solid red; text-align: center;}.content { display: inline-block; border: 1px solid green;}
效果:代码很简单,而且没什么兼容性问题,所以通常也不需要用别的复杂方式来实现水平居中效果。
二、水平垂直居中
使用CSS控制垂直居中(或者水平垂直居中)就不像控制垂直居中那么方便,这里主要罗列几种。
1、flex布局
flex布局出现以后,垂直居中就很方便了,直接设置父元素:
display: flexalign-items: center
如果同时要水平居中,则同时设置:justify-content center ,需要注意的是IE10+才支持,webkit前缀浏览器设置flex属性需要加webkit。
.container { width: 300px; height: 300px; border: 1px solid red; display: -webkit-flex; display: flex; // 关键属性 align-items: center; // 垂直居中 justify-content: center // 水平居中 } .content { border: 1px solid green; }
效果:
2、 margin+ position:absolute布局
position: absolute布局的元素,通过设置top/bottom, left/right这两对属性,可以让元素在垂直方向和水平方向分别具有了自适应的特性。就像div在水平方向的默认表现一样!上文中对于块级元素的水平居中,我们设置宽度然后配合以margin可以实现水平居中。而对于设置了top/bottom,left/right的absolute定位元素,我们设置宽高再配合margin就可以达到水平垂直居中:
.container { width: 300px; height: 300px; position: relative; border: 1px solid red;}.content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 200px; height: 100px; margin: auto; border: 1px solid green;}
效果:兼容性很好,IE8以上支持。
3、 transform + absolute
absolute定位元素的left、top属性是子元素的左边界、上边界相对父元素进行定位;transform是CSS3中非常强大的一个属性,可以接收多个属性值,包括旋转、缩放、平移等多种功能。这里使用二者配合,先将子元素左上定点定位到父元素中心点,再使用transform将子元素中心点移动到父元素的中心点即可:
.container { width: 300px; height: 300px; position: relative; border: 1px solid red;}.content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid green;}
效果:
这个方法有个小缺陷,就是translate函数的参数,最后的计算值不能为小数,否则有的浏览器渲染出来效果会模糊,所以使用本方法的话最好设置一下宽高为偶数。
4、absolute+margin负值
与上一种方法很类似,上一种方法是使用transform将元素向左上平移,本方法则是使用margin负值的方式将元素拉向左上角。
代码:
.container { width: 300px; height: 300px; position: relative; border: 1px solid red;}.content { position: absolute; left: 50%; top: 50%; width: 200px; height: 100px; margin-top: -50px; margin-left: -100px; border: 1px solid green;}
效果:
5、absolute + calc
从上两种方法可以看到,absolute设置了left和top再通过平移或者margin将元素重新定位回去。如果我们直接可以计算出正确的left和top值,岂不是一次到位?calc函数正有此功能,当然我们需要知道子元素的宽高:
.container { width: 300px; height: 300px; border: 1px solid red; text-align: center; position: relative;}.content { position: absolute; border: 1px solid green; width: 200px; height: 100px; left: calc(50% - 100px); top: calc(50% - 50px);}
效果:
6、 line-height + vertical-align
vertical-align是一个作用于内联元素的属性。内联元素的特性是会和其它内联元素或者文字在同一行显示,但是默认情况下是与父元素“基线对齐”的。这里的的基线指的是父元素每一行中的一个垂直位置,是英文x下边缘所在的水平, 通过设置vertical-align为middle可以将内联元素的中部对齐父元素的中部(基线+字母x的一半高度)。所以可以利用这一点,将父元素的行高设置为其自身高度,然后将子元素与父元素中线对齐,即可实现垂直居中。
代码:
.container { width: 300px; height: 300px; border: 1px solid red; line-height: 300px; text-align: center;}.content { display: inline-block; line-height: 1.5; border: 1px solid green; vertical-align: middle;}
效果:以上几种方法各有不同的适用条件,因此也有不同的优缺点,下表对各种方法进行了比较:
CSS中同一种表现效果往往有多种不同的实现方法,要刻意地尝试多种写法,避免熟悉了一两种方法就止步不前,这样才能对各种情况得心应手。本文完~
text文字垂直居中_CSS垂直居中,你会多少种写法?相关推荐
- h5文字垂直居中_CSS实现居中的几种方式你都了解吗?
CSS(Cascading Style Sheets)层叠样式表,是在1996年左右,W3C(万维网联盟)做HTML标准化的同时在HTML4.0之外开发的,拯救了当时越来越臃肿杂乱的HTML. 本文将 ...
- css 垂直居中_CSS垂直居中的另类实现
前言 众所周知,"css如何实现元素垂直居中?"已经是一个老生常谈的问题了,这个问题目前已经有了许多解决方案,这些方案也都有各自适用的场景以及优缺点,大致如下: flex布局 gr ...
- 高度不定垂直居中_CSS垂直居中的七个方法
我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 auto:或是text-align:center:,就可以轻松解决掉水平居中的问题,但一直 ...
- css居中 垂直居中_CSS垂直居中
css居中 垂直居中 Front-end developing is beautiful, and it's getting prettier by the day. Nowadays we got ...
- Compose Text文字垂直居中
需求效果:文本的高度为50dp,并且文字垂直居中 根据需求写出如下代码: Text(text = "你好,世界!", modifier = Modifier.height(50.d ...
- h5文字垂直居中_CSS中垂直居中和水平垂直居中的方法
flex垂直居中: 第一种:使用flex布局,让居中元素的父元素为flex属性,让它在交叉轴上center就可以达到居中效果了: html代码: <div class="father& ...
- input文字垂直居中_CSS的带文字居中分析
CSS居中的方法有特别多,这里只介绍最基本的方法. CSS中分块级元素和内联元素,但是块级元素或者内联元素都可以设置display,最常用的三种display--inline.block.inline ...
- java布局垂直居中_CSS水平居中和垂直居中解决方案(转)
一.CSS 居中 - 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...
- php excel 垂直居中,完美实现文字图片水平垂直居中
垂直居中是一个历史悠久的大问题,要做到兼容所有浏览器少不了要花点时间,网上也流传了很多解决方案,但没发现比我现在用的方案更完美,至少在我的项目是如此. 项目中要用到垂直居中而碰到兼容性问题的,一般都是 ...
最新文章
- 2019年,我终于知道86版西游记到底好在哪里了
- 手机重写alert方法(去除网址和关闭网页按钮)
- flex采用blazeds实现服务器向客户端推数据
- OPA PropertyStrictEquals match check logic
- Ubuntu16.04安装WPS
- jmeter使用if控制器_Jmeter 常见逻辑控制器详解
- POJ 3415 (后缀数组)
- python---之os.path.splitext(“文件路径”)
- java 使用vue_简单使用vue-cli
- 颠覆传统网络管理 Aruba新一代网络解决方案重磅呈现
- 企业该如何做好IT规划
- 2019智能网联汽车技术大会 | 感知+计算——解决智能网联汽车感知困境的必然趋势...
- TML5期末大作业:咖啡网站设计——咖啡网站pc端带轮播js (5页) 学生酒水网页作业, 生鲜水果网页作业成品, 零食小吃网页作 美食网页业模板
- 事务的特性——持久性(实现原理)
- 物流中心基建之:消防系统和暖通设计
- “百度杯”CTF比赛 2017 二月场 wp
- 计算机网络(6)体系结构:计算机网络协议、接口、服务的概念
- 50个Java多线程面试题
- bilibili视频下载信息获取
- 手势识别(一) - 项目概述与简单应用介绍