html fixed垂直居中,前端垂直居中的几种简单实现

冷不防 2022-10-09 02:36 202阅读 0赞

在前端开发尤其是web开发中会经常调整元素位置，所以经常会遇到居中问题，对于水平居中我们都知道用简单的text-align:center;就可以实现，但是对于垂直居中却并不是那么简单实现的，往往需要多条代码合作才能实现其效果。

本文简单介绍几种垂直居中的方式，技术不高，水平有限，仅供参考。

1. 不知道自己高度和父元素高度时，只要�使用绝对定位就可以实现

以下代码没有插图的都是实现的效果相同，如图所示：

![75a9c9fd3a7b][]

image.png

当一个父元素没有明确限制高度，而只是靠着内部元素的高度撑起来其高度时，我们又要在该父元素中设置一个居中的框框就可以采取这种方式：

// html代码

enter

//css代码

.parent-element-absolute \{

width: 800px;

text-align: left;

background-color: white;

position: relative;

.child-element-absolute \{

width: 450px;

height: 100px;

background-color: gray;

position: absolute;

top: 50%;

left: 50%;

\-webkit-transform: translate(-50%, -50%);

\-moz-transform: translate(-50%, -50%);

\-ms-transform: translate(-50%, -50%);

\-o-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

2. 在父元素下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可

该必须条件为该父元素下只有一个子元素。其html代码与上类似。

// css

.parent-element-relative \{

width: 800px;

height: 250px;

text-align: left;

background-color: white;

position: relative;

.child-element-relative \{

width: 450px;

height: 100px;

background-color: gray;

position: relative;

top: 50%;

left: 50%;

\-webkit-transform: translate(-50%, -50%);

\-moz-transform: translate(-50%, -50%);

\-ms-transform: translate(-50%, -50%);

\-o-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

3. flex布局设置垂直居中

.parent-element-flex \{

width: 800px;

height: 250px;

background-color: white;

display: flex;

display: -webkit-flex;

align-items: center;

.child-element-flex \{

width: 450px;

height: 100px;

background-color: gray;

margin: 0 auto;

4. table-cell设置垂直居中

.parent-element-table-cell \{

width: 800px;

height: 250px;

background-color: white;

display: table-cell;

text-align: center;

vertical-align: middle;

.child-element-table-cell \{

width: 450px;

height: 100px;

background-color: gray;

margin: 0 auto;

5. -webkit-box属性设置垂直居中

.parent-element-webkit-box\{

width: 800px;

height: 250px;

background-color: white;

display: -webkit-box;

\-webkit-webkit-box-pack: enter;

\-moz-webkit-box-pack: enter;

\-ms-webkit-box-pack: enter;

\-o-webkit-box-pack: enter;

\-khtml-webkit-box-pack: enter;

webkit-box-pack: enter;

\-webkit-box-align: center;

.child-element-webkit-box\{

width: 450px;

height: 100px;

background-color: gray;

margin:0 auto;

6. line-height实现文字居中

//html

andy

//css

.parent-element-line-height \{

width: 800px;

height: 250px;

background-color: white;

line-height: 250px;

text-align: center;

vertical-align: middle;

7. fixed设置窗口整体居中

.parent-element-fixed\{

width: 600px;

height: 250px;

background-color: lightgrey;

position: fixed;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

line-height: 250px;

vertical-align: middle;

[75a9c9fd3a7b]: /images/20221005/ce82a0bc4ac3415e82735878895d608e.png

html fixed垂直居中,前端垂直居中的几种简单实现

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS水平居中+垂直居中+水平/垂直居中的方法总结

相关浅谈CSS居中问题（水平居中、垂直居中、水平垂直居中）

相关 div垂直居中的几种方法

相关 html fixed垂直居中,前端垂直居中的几种简单实现

相关 CSS垂直居中的几种方法

相关图片在div中垂直方向居中，垂直居中

相关 css垂直居中的几种方法

相关 CSS水平居中，垂直居中，水平垂直居中

相关水平居中，垂直居中

相关水平垂直居中的几种实现方式