子元素水平垂直都居中的实现

最新推荐文章于 2024-06-01 16:06:49 发布
最新推荐文章于 2024-06-01 16:06:49 发布
阅读量813 收藏 9
点赞数 24
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangyining070205/article/details/138802271
版权

在网页布局中，如何实现子元素在水平方向和垂直方向居中，如图所示：
在这里插入图片描述

我知道的有这样的两种方式：
1.使用弹性布局实现
2.使用定位和平移实现
另外还有以下两种常用情况
3.窗口在整个屏幕水平垂直居中，还可以使用绝对定位实现。
4.多行文字垂直居中

1.使用弹性布局实现

在示例中，父元素.father宽度高度是300像素，子元素.son是160像素。关键的3行代码都加了备注。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性布局实现子元素水平垂直都居中</title>
		<style>
		/* 把父元素设置为弹性布局，设置水平和垂直都居中，其中的子元素就会水平和垂直都居中 */
		 .father{
		      width: 300px;
		      height: 300px;
		      border: 2px solid #0B97EA;
			  margin: 0 auto;
		      display: flex;       /*弹性布局*/
		      justify-content: center;  /*水平居中*/
		      align-items: center;  /*垂直居中*/
		  }
		  .son{
		      width: 160px;
		      height: 160px;
			  background-color: #FFB000;
		   }   
		</style>
	</head>
	<body>
		<div class="father">
				<div class='son'></div>
		</div>
	</body>
</html>

2.使用定位和平移实现

在没有弹性布局之前，使用这种方式来实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性布局实现水平垂直都居中</title>
		<style>
			.father {
				width: 300px;
				height: 300px;
				margin: 0 auto;
				overflow: hidden;
				position: relative;   /*相对定位*/
				border: 2px solid #0B97EA;
			}
			.son {
				width: 160px;
				height: 160px;
				background-color: #FFB000;
				position: absolute;  	/* 绝对定位 */
				top: 50%;   			/* 距离顶端50% */
				left: 50%;   		/* 距离左侧50% */
				transform: translate(-50%, -50%);  /* 往左、往上平移自身的50% */
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class='son'></div>
		</div>
	</body>
</html>

3.窗口在整个屏幕水平垂直居中，还可以使用绝对定位实现。

设置该元素为绝对定位，四个方向距离为0，同时设置margin:auto，可以实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位实现水平垂直都居中</title>
		<style>
			.son {
				width: 160px;
				height: 160px;
				background-color: #FFB000;
				/*以下5行css代码可实现窗口位置水平垂直都居中*/
				position: absolute;
				left: 0; 
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class='son'></div>
	</body>
</html>

4.多行文字垂直居中

如果是单行文本垂直居中，可以通过给元素的高度height和行高line-height设置相同的值实现。
子盒子中如果有多行文本的话，实现垂直居中，效果如图2所示。
图2
在上图中，主要用到的知识点是：
1.父元素 display: table;
2.子元素display: table-cell;
3.另外子元素还需要使用vertical-align: middle;
完整代码如下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本垂直都居中</title>
		<style type="text/css">
			.box{
				width: 1200px;
				height: 400px;
				display: flex;
				justify-content: space-between;
				margin: 0 auto;      /*	.box水平居中*/
				overflow: hidden;
			}
			.father {
				display: table; 				/*1设置display为table*/
				background: #f5f5f5;
				width: 360px;
			}
			.son {
				width: 160px;
				display: table-cell;				/*2设置display为table-cell*/
				vertical-align: middle;  		/*3垂直方向设置为middle*/
				text-align: center;
			}
		</style>
	</head>
	<div class='box'>
		<div class='father'>
			<div class='son'>
				给父元素div设置display:table，子元素p设置display:table-cell，再加上一个vertical-align:middle,不论内容有多少，不论行高是多少，总之都会整体垂直居中
			</div>
		</div>
		<div class='father'>
			<div class='son'>
				子元素p设置display:table-cell，再加上一个vertical-align:middle,不论内容有多少，不论行高是多少，总之都会整体垂直居中
			</div>
		</div>
		<div class='father'>
			<div class='son'>
				给父元素div设置display:table，子元素p设置display:table-cell，再加上一个vertical-align:middle,不论内容有多少，不论行高是多少，总之都会整体垂直居中
			</div>
		</div>
	</div>
</html>
蒲公英1001
关注
  • 24
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html实现水平垂直居中,HTML技巧篇：实现元素水平与垂直居中的几种方式
weixin_27015733的博客
06-15 2万+
如何使用html+css实现元素的水平与垂直居中效果，这也是我们网页在编码制作中会经常用到的问题。1)单行文本的居中主要实现css代码：水平居中：text-align:center;垂直居中：line-height:XXpx; /*line-height与元素的height的值一致*/我们先来看这样一个例子，加入我们这里有一个div，宽度和高度为300px，背景颜色为黑色，然后在div中有一行简短...
使用flex实现元素水平垂直居中
abcdebb的博客
05-24 877
<template> <view> <view class="father"> <view class="son"></view> </view> </view> </template> <script> export default { data() { return { } }, methods: { } } </scri
Flex布局实现div内部子元素垂直居中的示例
01-21
1、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。        采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main en
CSS实现子元素div水平垂直居中的示例
01-21
div基本布局 css样式 1. 配合定位与margin：auto 父元素加相对定位，子元素加绝对定位 .main{ width: 300px; height: 300px; background-color: red; position: relative; } .center{ width: 100px; height: 100px; background-color: skyblue; pos
使子元素水平垂直居中的方法
CSDNHtmlCssJava的博客
03-02 1843
方法一 转行内块方法 通过把子元素display:inline-block；转换成行内块元素，这时给父元素添加text-align:center;该声明对行内元素以及行内块元素生效，可以使子元素实现水平居中，在通过给父元素添加line-height行高，行高属性值等于父元素自身的高度，可以使子元素行内块在垂直的中线排列，最后给子元素添加vertical-align:middle;可以使子元素对齐方式从底线对齐，变成中线对齐。 方法二 使用定位方法实现居中 通过给父元素添加定位和给子元素添加绝对定位po
CSS的子元素水平垂直居中
m0_52043522的博客
04-06 1000
前言 水平垂直居中是CSS布局中经常会遇到的一个场景。不同的元素的水平或者垂直居中的策略也是不一样的。 一、水平居中 子元素的水平居中： 普通元素、行内元素、inline-box元素：在父元素中设置text-align:center。 块级元素（宽度确定）：在块级元素自身设置margin: 0 auto，也就是设置margin-left:auto; margin-right:auto;就可以实现了。不用在父元素上设置。 1.普通元素 <style> .box {
CSS中垂直居中的简单实现方法
12-13
大家都知道css里面用text-align:center加上margin:0 auto就可以实现水平居中了，但是垂直居中却没有相应的css属性来设置，而如果要设置元素能够垂直居中必须得将容器设置为display:table，然后将子元素也就是要垂直...
手把手教你CSS水平、垂直居中的10种方式(小结)
12-30
PC端有兼容性要求，子元素宽高固定，推荐absolute + 负margin PC端有兼容要求，子元素宽高不固定，推荐absolute + transform PC端无兼容性要求，推荐flex 移动端推荐使用flex 要怎么实现上面这幅图的效果呢，...
如何使div垂直水平居中的css代码
01-19
解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的
Flex布局实现div内部子元素垂直居中
热门推荐
fengchengwu2012的博客
01-04 1万+
1、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex ...
子元素在父元素中垂直水平居中
不甜呐的博客
05-08 1404
主要介绍 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定位法</title> <style type="text/css"> .parent{ width: 200px; height: 300px; background-color: skyblue; position: relative;
利用flex实现元素水平垂直居中
xiecheng1995的博客
07-19 1万+
首先介绍一下flex布局。 采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框 的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始...
元素水平垂直居中的方法
JJ_Smilewang的博客
04-21 4722
我们在制作页面的时候，经常需要把元素进行水平垂直居中，所以今天主要介绍行内元素和块级元素水平垂直居中的多种方法，供大家选择运用。 1.行内元素水平垂直居中的方法 1.1 水平居中 text-align:center; /* 实现行内元素水平居中 */ 1.2 垂直居中 1.2.1单行文本的垂直居中 只需要让元素高度和行高相等即可； <style> div { height: 50px; width: 300px;
CSS实现一个雨滴滑落效果
云加速
05-28 1515
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
vue使用tailwindcss
最新发布
Haveyounow的博客
06-01 415
【代码】vue使用tailwindcss。
更改Web网站设计——css和css框架
2301_81968528的博客
06-01 407
如果使用CSS设置背景色，文字颜色，元素配置，即使是相同的HTML文件，在外观上也会产生很大的变化。也可以将CSS的内容写进HTML文件，但是为了保持结构与设计样式，大多数情况下都应该将它们保存在不同的文件中。将它们分开就可以一次性设置多个HTML文件的设计样式。虽然使用css来编写代码可以创建出非常漂亮的设计样式，但是初学者要实现一个格式统一设计是比较困难的。因此，可以使用无须从零开始设计，可以简单利用按钮和表单等设计元素的CSS框架。虽然使用HTML可以定义文章的结构，但是其中不包含设计相关的信息。
css实现一个炫酷动画loading(四)
weixin_45389051的博客
05-31 564
【代码】css实现一个炫酷动画loading(四)
css简单介绍
taoxirun的博客
05-29 454
css指的是层叠样式(Cascadingstyle sheets)，是用来给HTML标签添加样式的语言。他可以设置HTML页面中 文字大小，颜色，对齐方式及元素的 宽高， 位置 等样式。CSS规则:由两个主要的部分构成:选择器，以及一条或多条声明，声明写在{中选择器:通常是您需要改变样式的 HTML元素，选择器是css和html两者的纽带。在head></head>标签对中写<stvle></style》标签对，然后在里边书写cSS语句。在css中，CSS注释写在/*....*/中。/*颜色:红色:*/
长方形边框 上方中间有缺口 css
u014722196的博客
05-29 309
clip-path 边框
android studio让子元素垂直水平居中
09-20
要让Android Studio中的子元素垂直水平居中，可以使用LinearLayout布局，并设置gravity属性为center。这样就可以实现子元素在垂直和水平方向上的居中对齐。 相关问题: 1. 如何在Android Studio中使用LinearLayout布局？ 2. LinearLayout布局

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值