1、水平居中
Element 的 Dialog 组件就是这样实现的。
利用 margin 水平位置 auto 属性。
<template>
<div class="body">
<div class="content"></div>
</div>
</template>
<style>
.body {
width: 100%;
height: 100%;
}
.content {
margin: 50px auto 0;
width: 200px;
height: 150px;
background-color: red;
}
</style>
2、水平垂直居中(利用行内块的特性)
Element 的 MessageBox 组件就是这样实现的。
容器的 text-align: center 使内部元素水平居中,伪元素 after 和 content 的 vertical-align: middle 使内部元素垂直居中。
<template>
<div class="dialog">
<div class="content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius, cupiditate magni nesciunt assumenda debitis ea libero reprehenderit quos veritatis repellat ut tempore commodi dolore illum impedit itaque saepe delectus ad.</div>
</div>
</template>
<style>
.dialog {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.dialog::after {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.content {
display: inline-block;
width: 400px;
vertical-align: middle;
background-color: red;
}
</style>
3、水平垂直居中(高度未知)
<template>
<div class="dialog">
<div class="content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius, cupiditate magni nesciunt assumenda debitis ea libero reprehenderit quos veritatis repellat ut tempore commodi dolore illum impedit itaque saepe delectus ad.</div>
</div>
</template>
<style>
.dialog {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: red;
/* 高度已知的话也可以用 margin-top, margin-left 代替 transform */
/* margin-top: -100px; */
/* margin-left: -100px; */
}
</style>