html实现水平垂直居中,HTML技巧篇：实现元素水平与垂直居中的几种方式

如何使用html+css实现元素的水平与垂直居中效果，这也是我们网页在编码制作中会经常用到的问题。

1)单行文本的居中

主要实现css代码：

水平居中：text-align:center;垂直居中：line-height:XXpx; /*line-height与元素的height的值一致*/

我们先来看这样一个例子，加入我们这里有一个div，宽度和高度为300px，背景颜色为黑色，然后在div中有一行简短文字，我们只需要使用line-height:200px;就可以实现文字的居中效果，具体的代码如下所示：

由上图可以看出我们实现了单行文字的垂直居中效果，但是很多时候我们的文字并不知道具体有多少，可能有一行，也可能有很多行，那么遇到多行文字的这种问题我们要如何处理呢。

2)多行文本的垂直居中

对于多行文本的垂直居中我们有很多种实现方式，我们这里逐个的来看一下；

1、使用display:table来实现

主要实现代码：

display: table使块状元素成为一个块级表格;

display: table-cell;子元素设置成表格单元格;

vertical-align: middle;使表格内容居中显示，即可实现垂直居中的效果;

具体的html与css的代码就如下所示：

2、使用absolute与transform配合实现

主要实现代码：

position:absolute; 首先给文本绝对定位；

left:50%;top:50%;transform:translate(-50%,-50%); 让文本距离盒子左边和上边分别为50%，再用transform向左(上)平移它自己宽度(高度)的50%，也就达到居中效果了。

具体的html与css的代码就如下所示：

3、使用flex实现

主要实现代码：

display: flex;设置 display 属性的值为 flex 将其定义为弹性容器

align-items: center;定义项目在交叉轴(纵轴)上如何对齐，垂直对齐居中

justify-content: center; 定义了项目在主轴上的对齐方式，水平对齐居中

具体的html与css的代码就如下所示：

好了，本篇文章就给大家说到这里，大家自己动手写一下看能不能写出一样的页面效果出来，也可以找一些类似的页面自己练习一下。

html,将元素水平，垂直居中的四种方式

将元素垂直,水平居中分两种情况:一个是元素尺寸固定,二是元素尺寸不固定 一.尺寸固定 方法1:定位 ,50%,margin负距 .box{ width: 400px; height: 300px; b ...

DIV元素水平和垂直居中

在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

让div等块级元素水平以及垂直居中的解决办法

一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将 ...

CSS实现水平垂直居中的1010种方式

转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

Java 数组元素逆序Reverse的三种方式

Java 数组元素逆序Reverse的三种方式   本文链接:https://blog.csdn.net/xHibiki/article/details/82930521 题目 代码实现 说明 int ...

让DIV水平和垂直居中的几种方法

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

【翻译】CSS水平和垂直居中的12种方法

英语原文链接 在CSS中有许多不同的方法能够做到水平和垂直居中,但很难去选择合适的那个.我会向你展示我所看到的所有的方法,帮助你在所面对的情境下选择最棒的那一个. 方法1 此方法将只能垂直居中单行文本 ...

[CSS] 子元素垂直居中的两种方式

1. 多个子元素水平并排,IE10以下失效 display: flex; align-items: center; justify-content: center; 2.多个子元素竖直排列,这种方式会 ...

随机推荐

Android Context 是什么？

andorid 开发(42)  版权声明:本文为博主原创文章,未经博主允许不得转载. [转载请注明出处:http://blog.csdn.net/feiduclear_up CSDN 废墟的树] PS ...

使用STS 创建spring配置文件

1.创建一个bean文件 2.输入文件名applicationContext.xml 3.这里会自动显示模板文件 4.创建后,自动填充头不定义 到这里就可以发现,我们创建spring文件时,需要的配置 ...

漫谈程序猿系列：她发现了一个Bug……

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm9ydW9r/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

ubuntu环境下lnmp环境搭建(3)之Php

1.lnmp详细  http://www.discuz.net/thread-3513107-1-1.html 2. 到php目录 http://blog.aboutc.net/linux/65/co ...

less命令查看文件时的常用操作

下键或者回车:往下一行 D:往下半页 空格和f:往下一页 上键:往上一行 B:往上一页 shift+G:直接切到末尾 ?+搜索条件:从下往上搜索 /+搜索条件:从上往下搜索

MongoDB在windows上的安装

D:\MongoDB\Server\4.0\bin 下载地址:https://www.mongodb.com/download-center/community 中文教程:http://www.run ...

Pick-up sticks

Pick-up sticks Stan has n sticks of various length. He throws them one at a time on the floor in a r ...

flex-direction

[flex-direction] The flex-direction CSS property specifies how flex items are placed in the flex con ...

ORA-01403:no data found 解决办法

原因:select a into b from table:当查询出来的a没有数据时,这个时候就会抛出这个异常:ORA-01403:no data found 解决方法: 先定义一个整形变量,coun ...

2017 ACM-ICPC 亚洲区(西安赛区)网络赛 xor (根号分治)

xor There is a tree with nn nodes. For each node, there is an integer value a_ia​i​​, (1 \le a_i \le ...