CSS初入门：设置子元素水平居中的方式

问题描述：

用几种方式实现元素位于父元素的水平居中位置，如图：

解决

方式一

通过控制子元素的左边框和右边框来达到居中的效果。

在那之前，我先举个我遇到过的错误示范

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试子元素在父元素中的水平居中方式</title><style>.father{background-color: yellow;width: 300px;height: 300px;}.son{background-color: red;width: 100px;height: 100px;margin-left:100px;margin-top: 100px;} </style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

然后造成的结果如下：

1、发现的问题：子元素没有出现上外边距的效果，反而是父元素出现了上外边距的效果，而子元素的左边框却又有效果。
2、原因：==在默认(标准流)布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的。水平方向上的外边距会叠加。==垂直方向上，这里的父元素没有上补白和上边框，那么它的上边距应该和其文档流中的孩子元素的上边距重叠；而水平方向上，父元素没有左补白和左边距，但其子元素有左边距，而水平方向上父子元素的边距是会叠加的。

那么在设置了子元素外边距的基础上如何让子元素水平居中,有以下几种方式
（1）给父元素设置内边距padding:10px
（2）给父元素设置边框border : 1px solid white
（3）给父元素设置浮动float:left;
（4）给父元素设置overflow:hidden
（5）父元素设置相对定位position:reletive;，子元素设置绝对定位position：absolute;

方式二

父相子绝¹，子元素中的top和left定位为50%，并且通过改变子元素中的margin-left和margin-top来进行移动，通常均为子元素高宽的一半的负数，也就是让子元素当前位置的相反方向移动。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试子元素在父元素中的水平居中方式</title><style>.father{background-color: yellow;width: 300px;height: 300px;position: relative;}.son{background-color: red;width: 100px;height: 100px;position:absolute;top:50%;left: 50%;margin-left: -50px;margin-top: -50px;/*transform: translate(-50%, -50%);*/ /*margin-left和margin-top可以用这个来代替，表示移动自身多少的位置*/}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

分析：当只给父元素和子元素设置边框和背景色的时候，如图：

再此基础上再给父元素设置相对定位，子元素设置绝对定位，并且子元素设置top:50%;left:50%;如图

此时子元素的左上角是出于父元素的正中间的，但子元素的中心并没有处于父元素的中心，所以需要通过改变子元素的左边框和上边框的大小来改变子元素的位置，左右边框设置为margin-left: -50px;margin-top:-50px;，也就是将子元素向左边移动50px的距离，向上移动50px的距离，此时子元素就位于中间了。

方式三

也是采用父相子绝定位，将子元素中的left、right、top、bottom设置为0，通过使用margin:auto让子元素自动调整自身外边框，以便它处于水平居中位置。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试子元素在父元素中的水平居中方式</title><style>.father{background-color: yellow;width: 300px;height: 300px;position: relative;}.son{background-color: red;width: 100px;height: 100px;position: absolute;left: 0;right: 0;top:0;bottom: 0;margin: auto;} </style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

方式四

使用flex弹性布局，给父元素设置display:flex;，设置其下子元素位于主轴中心justify-content:center，位于交叉轴中心align-items:center;

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试子元素在父元素中的水平居中方式</title><style>.father{background-color: yellow;width: 300px;height: 300px;/* 父元素设置为浮动布局 */display: flex;/* 父元素下的子元素位于主轴上的位置为：center */justify-content: center;/* 父元素下的子元素位于交叉轴上的位置为：center */align-items: center;}.son{background-color: red;width: 100px;height: 100px;            } </style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

方式五

使用grid布局实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.outer {display: grid;height: 100vh;}.inner {width: 100px;height: 100px;align-self: center;justify-self: center;background-color: rgb(108, 178, 239);}</style></head><body><div class="outer"><div class="inner"></div></div></body>
</html>

父元素采用相对定位，子元素采用绝对定位 ↩︎

CSS初入门：设置子元素水平居中的方式相关推荐

flex布局怎么设置子元素大小_48张小图带你领略Flex 布局之美
前言最近在项目中,遇到布局问题,有时候,需要堆叠很多的样式,去排版,一定程度上增加了代码量,那么有没有更加方便的布局方式呢?? 48张图带你从0到1掌握flex布局方式. flex布局在某种程度上, ...
设置子元素在主轴(横轴)方向上的对齐方式为容器的开头_今日推送 CSS Flexbox布局（上）...
在" Flexbox布局"模块之前,有四种布局模式: 四种布局模式: 块布局block,常见的就是div 内联inline,用于文本表table,用于二维表数据定位positi ...
CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距
场景 Flex是Flexible Box的缩写,意为"弹性布局". 怎样使用弹性布局实现页面上下两个元素上下左右垂直居中排列. 实现如下类似布局最外层是是一个div,div里面是 ...
flex布局怎么设置子元素大小_Web前端（三）：前端布局
前端布局对前端开发而言是必不可少的环节之一.我所理解的前端布局可以分成两个大类,第一类是元素层面的布局,就是像absolute布局.flex布局等等,都是描述元素在页面上以何种形式呈现,即局部的布局: ...
CSS初入门：过渡-Transitions
过渡介绍 CSS transittions是一种更改CSS属性时控制动画速度的方法.其可以让属性变化成为一个持续一段时间的过程,而不是立即生效.而要实现这一点,就必须满足如下两项内容: (1)指定要 ...
flex布局怎么设置子元素大小_Chrome72 嵌套 flex 布局修改，你的网站可能会发生布局错乱...
起源 2019 年 1 月 29 日,Chrome72 正式版(72.0.3626.81)发布,本次发布带来了一个改变,且没有在更新日志中提及,该改变导致某些网站发生了布局错乱.该改变主要针对的是嵌套 ...
用 justify-content 属性设置子元素两端对齐
外层元素的 justify-content 属性设置为space-between即可实现子元素两端对齐 <!DOCTYPE html> <html> <head> ...
flutter - GridView 网格布局，以及设置子元素的间距和大小
基础的 GridView 布局参数说明 gridDelegate 对子元素进行修饰,由于SliverGridDelegate 是一个抽象类, 找它的实现类有 [SliverGridDelegate ...
flex.css快速入门，极速布局
什么是flex.css? css3 flex 布局相信很多人已经听说过甚至已经在开发中使用过它,但是我想我们都会有一个共同的经历,面对它的各种版本,各种坑,傻傻的分不清楚,flex.css就是对fle ...

CSS初入门：设置子元素水平居中的方式

问题描述：

解决

方式一

方式二

方式三

方式四

方式五

CSS初入门：设置子元素水平居中的方式相关推荐

最新文章

热门文章