前端基础-布局-1

11.1 未知高度元素垂直居中、垂直居中的实现方式有哪些？

参考答案：

1、绝对定位+css3 transform:translate(-50%，-50%)

.wrap{
  position:relative;
}
.child{
  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);
}

2、css3 的flex布局

.wrap{
  display:flex;
  justify-content:center;
}
.child{
  align-self:center;
}

3、table布局

<div class="wrap">
   <div class="child">
          <div>sadgsdgasgd</div>
   </div>
</div>
.wrap{
  display:table;
  text-align:center;
}
.child{
  background:#ccc;
  display:table-cell;
  vertical-align:middle;
}
.child div{
    width:300px;
    height:150px;
    background:red;
    margin:0 auto;
}

11.2 实现图片垂直居中

参考答案：

1. 使用flex实现图片垂直居中

利用 display: flex;align-items: center 实现垂直居中。flex可能不是实现垂直居中最好的选择，因为IE8,9并不支持它。

html代码：

<div class="flexbox">
    <img src="1.jpg" alt=""></div>

css代码：

body{ background:#999}
.flexbox{width: 300px;height: 250px;background:#fff;display: flex;align-items: center}
.flexbox img{width: 100px;height: 100px;align-items: center;}

2. 利用Display: table;实现img图片垂直居中

给最外层的div设置display属性为table;img的父元素div设置display:table-cell,vertical-align: middle;如果你也想实现水平居中，你可以给最外层的div元素添加text-align: center属性

html代码：

<div class="tablebox">
    <div id="imgbox">
        <img src="1.jpg" alt="">
    </div></div>

css代码：

.tablebox{width: 300px;height: 250px;background: #fff;display: table}
#imgbox{display: table-cell;vertical-align: middle;}
#imgbox img{width: 100px}

3. 用绝对定位实现垂直居中（推荐-兼容性好）

给img的父元素添加相对定位属性（position: relative），同时，要给子元素也就是图片img元素添加绝对定位属性（position: absolute）。
将图片元素的top属性设置为50%。
现在我们需要给img元素设置一个负的margin-top值，这个值为你想要实现垂直居中的元素高度的一半，*如果不确定元素的高度，可以不使用margin-top，而是使用transform:translateY(-50%);属性。

记住：如果你想要同时实现水平居中，那么你可以用实现垂直居中的一样的技巧来实现。

HTML代码：
```
<div class="posdiv">
<img src="1.jpg" alt=""></div>
```
css代码：
```
body{background: #ccc;}
.posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}
```

11.3 设置斑马线表格(纯css)

参考答案：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>斑马线表格</title>
 <style type="text/css">
 *{
  margin: 0;
  padding: 0;
  /*清处浏览器默认设置*/
 }
 table{
  /*表格的外边距和大小*/
  margin: 10px 0 0 0;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  /*collapse 表格单元格边框合并 
   border-spacing 表格单元格间距为零
  */
 }
 caption{
  font: 30px "楷体";
  padding: 5px;
  /*表格标题*/
 }
 td{
  width: 32%;
  height: 50px;
  /*单元格大小*/
 }
 tbody td{
   border: 1px solid;
   /*表格主体的边框*/
 }
 thead{
  background-color: #A2A5A7;
  /*表格头部*/
 }
 tr:hover{
  background-color: #66D9EF;
  cursor: pointer;
  /*鼠标悬停在表格上时，表格的背景和鼠标的形状*/
 }
 table tbody tr:nth-child(even){
  background-color: #8F908A;
  box-shadow: inset 0 5px rgba(255,255,255,0.5);
  /*even为偶数行 odd为奇数行
    设置表格的主体部分偶数行的样式
    shadow 阴影  inset将外部阴影改为内部阴影
  */
 }
 thead tr th:first-child
 {
  /*表头部分th 第一个th左上角设置圆角*/
  border-radius: 15px 0 0 0;
 }
 thead tr td:last-child{
  /*最后一个单元格右上角设置圆角*/
  border-radius: 0 15px 0 0;
 }
 </style>
</head>
<body>
 <table>
 <caption>斑马线表格</caption>
 <thead>
  <tr>
   <

剩余60%内容，订阅专栏后可继续查看/也可单篇购买

前端岗位面试真题宝典文章被收录于专栏

本面试宝典均来自校招面试题目大数据进行的整理