Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
haizhilin2013 opened this issue May 24, 2019 · 11 comments
Open

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

haizhilin2013 opened this issue May 24, 2019 · 11 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第39天 写出你知道的CSS水平和垂直居中的方法
@haizhilin2013 haizhilin2013 added the css css label May 24, 2019
@git710
Copy link

git710 commented 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
Copy link 

<div class="parent">
  <div class="child" />
</div>
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

@xiangshuo1992
Copy link
Contributor

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

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

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

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

@rocky-191
Copy link

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

@tzjoke
Copy link

tzjoke commented 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
Copy link

JJL-SH commented 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
Copy link

NARUTOne commented Oct 25, 2019 •
edited

垂直居中

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 haizhilin2013 mentioned this issue Apr 19, 2020
Open
@MrZ2019
Copy link

MrZ2019 commented 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
Copy link

完全居中常用两种方案：

  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;
}

@m5ultra
Copy link

m5ultra commented Mar 19, 2021

不错

@zxcdsaqwe123
Copy link

水平居中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
Assignees
No one assigned
Labels
css css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests