常规常见的垂直居中，最方便的实现方案是flex布局。除此之外使用margin:auto,或者是绝对定位方式。
但现在的需求是两个兄弟元素，要求B相对于position为fixed的A垂直居中，且B的宽度不确定。
这个该怎么实现呢？
我所能做到的居中只是采用绝对定位的居中，而这只能在宽度确定的情况下。
直到大神们写代码分享之后，才知道还可以这样实现，html和css还真不是简单的。
mark一下。
我实现的垂直居中以及两个元素间的相对居中，hack味道的确很浓。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>兄弟元素的相对居中</title>
<style>
.box {
display: flex;
}
.box1 {
background-color: #ccc;
height: 100px;
800px;
margin: auto;
color: green;
font-size: 28px;
position: relative;
}
.box2 {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: red;
color: white;
/* 300px; */
height: 60px;
position: absolute;
top: 100px;
left: 200px;
transform: translate(50%, 50%);
}
.planSelect{
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);;
background-color: #ccc;
padding: 10px;
}
body {
text-align: center;
background: #FFD34E;
color: #FFFAD5;
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
background-color: #BD4932;
}
li a {
display: block;
padding: .5em 1em;
color: #FFFAD5;
}
.nav-table {
display: table;
margin: auto
}
.nav-inline-block {
display: inline-block;
}
.orange {
color: #BD4932;
}
.one,.two{
display: inline-block;
text-align: center;
height: 200px;
500px;
background-color: green;
}
main {
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -9em;
18em;
height: 6em;
background-color: #BD4932;
}
.main2 {
position: absolute;
top: calc(30% - 3em);
left: calc(50% - 9em);
18em;
height: 6em;
background-color: aqua;
}
.main3 {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #58a;
}
.main-box {
500px;
height: 200px;
background: green;
}
.center{
position: absolute;
left: 200px;
100px;
height: 100px;
background-color: aqua;
}
.loading {
margin-top: 800px;
}
.loading:before{
content: '';
display: block;
4em;
height: 4em;
margin: 0 auto 1em;
border: 1.5em solid;
color: yellowgreen;
box-sizing: border-box;
-webkit-animation: 1s spin, .7s radius, 1.1s color, 1.3s width;
/* animation-name: spin, radius, color, width;
animation-duration: 1s, 0.7s, 1.1s, 1.3s;
animation-timing-function: ease-in-out;
animation-delay: initial, initial, initial, initial;
animation-iteration-count: infinite;
animation-direction: initial, initial, initial, initial;
animation-fill-mode: initial, initial, initial, initial;
animation-play-state: initial, initial, initial, initial; */
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.airline {
background: #58a;
color: white;
500px;
/* position: fixed; */
margin-top: 1300px;
height: 200px;
}
.popcard {
position: relative;
top: 50%;
left: 50%;
background:#BD4932;
100px;
height: 100px;
}
.pop {
/* position: fixed; */
/* top: 50%;
left: 50%; */
400px;
}
</style>
</head>
<body>
<!-- <div class="box">
<div class="box1">
这是航线位置
</div>
<div class="box2">
这是浮动框位置
</div>
<div class="planSelect">
这是一个关于居中的测试
</div>
</div> -->
<!-- <h1>动态水平居中对齐</h1>
<nav role='navigation' class="nav-table">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<div>使用 <span class="orange">display: inline-block</span></div>
<nav role='navigation' class="nav-inline-block">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<div class="one">
</div>
<div class="two"></div> -->
<main>
<h1>Am I centered yet?</h1>
<p>Center me,please!</p>
</main>
<div class="main2">
<h1>Am I centered yet?</h1>
<p>Center me,please!</p>
</div>
<div class="main-box">
<div class="main3">
<h1>Am I centered yet?</h1>
<p>Center me,please!</p>
</div>
</div>
<div class="center">
</div>
<div class="loading">
test
</div>
<div class="airline">
航线
</div>
<div class="pop">
<div class="popcard">
气泡框
</div>
</div>
</body>
</html>
同事实现的效果
<video src="/桌面/one.mp4">
</video>
代码
<html>
<head>
<title>test</title>
<meta charset='utf-8'>
<style>
.reference,.a,.d{position:fixed;}
.reference,.b,.c {
text-align: center;
line-height: 50px;
}
.reference{ top:100px;left:600px;100px;height:50px;background:red;}
.a,.d {top:200px;left:650px;}
.b, .c{
position:relative;
/*300px;*/
height:50px;
background-color:blue;
left:-50%;
}
.c {background-color:grey}
.d {
top:400px;
}
</style>
</head>
<body>
<div class="reference">参照物</div>
<div class="a">
<div class="b">test</div>
</div>
<div class="d">
<div class="c">手动定位父级到参照物中心点，子元素撑开父级元素，利用left-50%来对齐参照物。重点：left的百分比相对父级宽度移动</div>
</div></div>
</body>
<script>
var d = document.getElementsByClassName('b');
setInterval(function(){
d[0].style.width = Math.random(2)*200;
},1000)
</script>
</html>
第二种方法，使用了transform属性，该属性的变形是以本身为基准
<html>
<head>
<title>test</title>
<meta charset='utf-8'>
<style>
.reference,.a{position:fixed;left:650px;
100px;
}
.reference,.b {
text-align: center;
line-height: 50px;
}
.reference{ top:100px;height:50px;background:red;}
.a {top:200px;}
.b{
position:relative;
height:50px;
background-color:blue;
left:50%;
transform:translateX(-50%);
}
.c {top:300px;}
.d {background-color: grey;1000px;height:100px;}
</style>
</head>
<body>
<div class="reference">参照物</div>
<div class="a">
<div class="b">test</div>
</div>
<div class='a c' >
<div class="b d">手动定位父级对齐参照物，父级参照物设置为参照物的宽度，子元素left50%自动对准参照物中心点，子元素tracelateX(-50%)对齐中心点。重点：tracelateX的百分比是相对于本身位移，left的百分比相对父级宽度移动</div>
</div>
</body>
<script>
var d = document.getElementsByClassName('b');
setInterval(function(){
d[0].style.width = Math.random(2)*200;
},1000)
</script>
</html>
这是第一次遇到这种居中的问题，以前还真没思考过，真正遇上了，乍一听很简单，结果还真不简单。算是打开了一种新思路。
突然有了新问题，该博客中如何插入录屏？