Skip to content

[css] 第39天 写出你知道的CSS水平和垂直居中的方法 #145

New issue
New issue
Open
Open
[css] 第39天 写出你知道的CSS水平和垂直居中的方法#145
Labels
csscss
@haizhilin2013

Description

@haizhilin2013
haizhilin2013
opened on May 24, 2019

第39天 写出你知道的CSS水平和垂直居中的方法

Activity

haizhilin2013
added
csscss
on May 24, 2019
git710

git710 commented on May 25, 2019

@git710
git710
on May 25, 2019

flex布局水平垂直居中:

<!--  html -->
<div class="outer">
    <div class="inner"></div>
</div>
/*css*/
.outer{
    display:flex;
    width:200px;
    height:200px;
    border:1px solid red;
}
.inner{
    width:100px;
    height:100px;
    border:1px solid blue;
    margin:auto;
}
wenyejie

wenyejie commented on May 25, 2019

@wenyejie
wenyejie
on May 25, 2019
<div class="parent">
  <div class="child" />
</div>
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
xiangshuo1992

xiangshuo1992 commented on May 25, 2019

@xiangshuo1992
xiangshuo1992
on May 25, 2019
Contributor

这个就多了，分为水平居中，垂直居中，水平垂直居中。
可以看下我之前整理的：还不会CSS水平垂直居中？这里有12种方案

然后呢，后来发现有个同学整理的比我更多
如何居中一个元素（终结版）

针对上面的整理，我还补充了一条

已知宽高，利用绝对定位来居中

rocky-191

rocky-191 commented on May 25, 2019

@rocky-191
rocky-191
on May 25, 2019

水平垂直居中，flex布局，定位布局（absolute+margin）| (asbolute+transform)也可以实现。text-align:center水平居中，这种方案还有好多种。

tzjoke

tzjoke commented on May 28, 2019

@tzjoke
tzjoke
on May 28, 2019

完全居中常用两种方案：

  1. 绝对布局
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  1. flexbox
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
JJL-SH

JJL-SH commented on Sep 18, 2019

@JJL-SH
JJL-SH
on Sep 18, 2019
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box {
        position: fixed;
        background: red;
        width: 100px;
        height: 100px;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
NARUTOne

NARUTOne commented on Oct 25, 2019

@NARUTOne
NARUTOne
on Oct 25, 2019 · edited by NARUTOne

垂直居中

https://codepen.io/NARUTone/pen/NWWjorK

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css-center</title>
		<style type="text/css">
			.parent {
				width: 60%;
				height: 500px;
				margin: 15px auto;
				padding: 12px;
				background-color: #008000;
				color:#fff ;
			}
			
			.child {
				background-color: #99de93;
				padding: 10px;
			}
			
			.absolute-center {
			  width: 50%;
			  height: 50%;
			  overflow: auto;
			  margin: auto;
			  position: absolute;
			  top: 0; left: 0; bottom: 0; right: 0;
			}
			
			.is-Negative {
        width: 300px;
        height: 200px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
			}
			
			.is-Transformed { 
			  width: 50%;
			  height: 200px;
			  margin: auto;
			  position: absolute;
			  top: 50%; left: 50%;
			  -webkit-transform: translate(-50%,-50%);
	      -ms-transform: translate(-50%,-50%);
			  transform: translate(-50%,-50%);
			}
			
			
			.Center-Container.is-Table { display: table; }
			.is-Table .Table-Cell {
			  display: table-cell;
			  vertical-align: middle;
			}
			.is-Table .Center-Block {
			  width: 50%;
			  height: 200px;
			  margin: 0 auto;
			}

			.Center-Container.is-Inline { 
			  text-align: center;
			  overflow: auto;
			}
			
			.Center-Container.is-Inline:after,
			.is-Inline .Center-Block {
			  display: inline-block;
			  vertical-align: middle;
			}
			.Center-Container.is-Inline:after {
			  content: '';
			  height: 100%;
			  margin-left: -0.25em; /* To offset spacing. May vary by font */
			}
			.is-Inline .Center-Block {
				width: 60%;
				height: 200px;
			  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
			  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
			}
			
			.is-Flexbox {
			  display: -webkit-box;
			  display: -moz-box;
			  display: -ms-flexbox;
			  display: -webkit-flex;
			  display: flex;
			  -webkit-box-align: center;
			     -moz-box-align: center;
			     -ms-flex-align: center;
			  -webkit-align-items: center;
			          align-items: center;
			  -webkit-box-pack: center;
			     -moz-box-pack: center;
			     -ms-flex-pack: center;
			  -webkit-justify-content: center;
			          justify-content: center;
			}
		</style>
	</head>
	<body>
		<div class="parent" style='position:relative;'>
			<h3>absolute垂直居中定位</h3>
			<div class='child absolute-center'>
				<h3>内容</h3>
			</div>
		</div>
		<div class="parent" style='position:relative;'>
			<h3>负margin垂直居中定位</h3>
			<div class='child is-Negative'>
				<h3>内容</h3>
			</div>
		</div>		
		<div class="parent" style='position:relative;'>
			<h3>transform法垂直居中定位</h3>
			<div class='child is-Transformed'>
				<h3>内容</h3>
			</div>
		</div>
		
		<div class="parent Center-Container is-Table">
		  <div class="Table-Cell">
		    <div class="Center-Block">
		    <!-- CONTENT -->
		    	<div class='child'>
						<h3>table-cell法</h3>
					</div>
		    </div>
		  </div>
		</div>
		
		<div class="Center-Container parent is-Inline">
		  <div class="Center-Block child">
		    <!-- CONTENT -->
		    <h3>inline-block法</h3>
		  </div>
		</div>
		
		<div class="parent" style='position:relative;'>
			<h3>Flexbox法垂直居中定位</h3>
			<div class='child is-Flexbox'>
				<h3>内容</h3>
			</div>
		</div>		
	</body>
</html>
haizhilin2013
mentioned this on Apr 19, 2020
smile-2008

smile-2008 commented on Oct 29, 2020

@smile-2008
smile-2008
on Oct 29, 2020

flex布局水平垂直居中:

<!--  html -->
<div class="outer">
    <div class="inner"></div>
</div>

/*css*/
.outer{
    display:flex;
    width:200px;
    height:200px;
    border:1px solid red;
}
.inner{
    width:100px;
    height:100px;
    border:1px solid blue;
    margin:auto;
}
jamsehua

jamsehua commented on Jan 10, 2021

@jamsehua
jamsehua
on Jan 10, 2021

完全居中常用两种方案：

  1. 绝对布局
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  1. flexbox
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

xsSeek

xsSeek commented on Mar 19, 2021

@xsSeek
xsSeek
on Mar 19, 2021

不错

zxcdsaqwe123

zxcdsaqwe123 commented on Oct 28, 2021

@zxcdsaqwe123
zxcdsaqwe123
on Oct 28, 2021

水平居中margin： 0 auto或者
display：flex ；justify-content：center
或者text-align：center；
垂直居中：display：flex；align-items： center

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    csscss

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@wenyejie@haizhilin2013@JJL-SH@rocky-191

        Issue actions
          [css] 第39天 写出你知道的CSS水平和垂直居中的方法 · Issue #145 · haizlin/fe-interview