css居中问题?

Question

一个元素（脱离文档流，position：absolute），且此元素宽度不固定，如何让此元素可以水平居中?有什么好的解决方案？

Answer 1

使用弹性布局，父元素：
display: flex;
justify-content: center;//水平居中
align-items: center;//垂直居中

或者
父元素:
position: relative;
子元素:
left: 50%;
top: 50%;
transform: translate(-50%);

Answer 2

子元素绝对定位，找到父及元素，设置子元素的top left为50% ，transform:translate(-50%);

Answer 3

宽高只是为了方便看效果，可以看下我的这篇文章居中一个div的n中方法

div {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink;
}

Answer 4

1. flex布局：
父元素设置
.parent{

display: flex;
justify-content: center;
align-items: center;

}
2. transform:transition(-50%,-50%)
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
//或写为（需提前知道元素宽高）
//margin-left:-50px;
//margin-right:-50px
3. margin:0 auto（水平居中的最简单方式，需知道元素宽度）
4. display:inline-block
父元素设置
.parent{

text-align: center;

}
子元素设置
.child{

display:inline-block;

}

Answer 5

这是自己整理的水平和垂直居中，在兼容性允许的情况下，选择一种最适合自己的就行
http://jsbin.com/cogiwid/70/e...