网站开发论文答辩问题注册安全工程师
前端常问居中面试问题
css文本居中
文本水平居中
<div class="father"><div class="child"><div>
<div>
子类元素为行内元素，则给父类元素定义text-align:center
如果子元素是块元素，则给子元素定义margin：0 auto；
如果子元素是块级元素，可以通过display将子元素定义成行内元素，在给子元素定义text-align:center
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title><style>.father {width: 800px;height: 800px;background-color: skyblue;}.child {display: block;text-align: center;background-color: orange;}</style>
</head>
<body><div class="father"><span class="child">我是一棵小小小小草奥</span></div>
</body>
</html>
如果margin：0 auto；加在父元素上，则父元素相对与body水平居中。text-align是作用于自身
文本垂直居中
<div>hello word </div>例如这个高为100px，让文本居中你需要两个条件
div {vertical-align:middledisplay:table-cell;
}这里display必须是table-cell
是table-cell会控制这个盒子的宽度为里面text的宽度，并不是真正可以设置宽高
另一种方法是，对单行文本的垂直居中可以将行高line-height设置为盒子的高度
给盒子做居中
盒子水平居中
margin：auto
盒子垂直居中，不能用margin，可以用定位或者flex布局实现或者浮动
用定位实现常见的父子盒子都是块元素的情况
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title><style>.father {width: 800px;height: 800px;background-color: skyblue;position: relative;}.child {width: 200px;height: 200px;top: 50%;left: 50%;transform: translate(-50%,-50%);position: absolute;background-color: orange;}</style>
</head>
<body><div class="father"><div class="child"></div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title><style>.father {width: 800px;height: 800px;background-color: skyblue;position: relative;//父元素开启相对定位}.child {width: 200px;height: 200px;top: 0;left: 0;right: 0;bottom: 0;margin: auto; //居中关键就是外边距为autoposition: absolute; //子元素开启固定定位background-color: orange;}</style>
</head>
<body><div class="father"><div class="child"></div></div>
</body>
</html>
方式不一样但是呈现的样式是一样的
弹性盒子居中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title><style>.father {width: 800px;height: 800px;display: flex; //这里必须要开启弹性盒子justify-content: center; //水平居中align-items: center;//垂直居中background-color: skyblue;}.child {width: 200px;height: 200px;background-color: orange;}</style>
</head>
<body><div class="father"><div class="child"></div></div>
</body>
</html>
