代码:
<template><div class="container">ceshies</div></template><style lang='scss' scoped>.container{width: 200px;height: 200px;background-color: aquamarine;}</style>
原始位置
已知元素宽高——水平居中
1.块元素置左右margin值为自动auto
<template><div class="container"></div></template><style lang='scss' scoped>.container {width: 200px;height: 200px;background-color: aquamarine;margin: 0 auto;//设置左右margin值为自动auto即可}</style>
2.行内块元素:父元素设置text-align: center
<template>//父元素设置text-align: center<div style="text-align: center"><div class="container"></div></div></template><style lang='scss' scoped>.container {display: inline-block;width: 200px;height: 200px;background-color: aquamarine;}</style>
3.均可使用弹性布局flex
<template><div class="box"><div class="container"></div></div></template><style lang='scss' scoped>//父元素设置flex,主抽居中排列.box {display: flex;justify-content: center;//主要这个}.container {width: 200px;height: 200px;background-color: aquamarine;}</style>
4.使用定位position+margin-left
<template><div class="container"></div></template><style lang='scss' scoped>.container {position: relative;//absolute、fixed也可以left: 50%;//距离左边父元素的50%margin-left: -100px;//向左移自身width的一半(左外边距为负值)width: 200px;height: 200px;background-color: aquamarine;}</style>
5.使用定位position+transform
<template><div class="container"></div></template><style lang='scss' scoped>.container {position: absolute;left: 50%;transform: translateX(-50%);往x轴负方向(向左)移自身的一半width: 200px;height: 200px;background-color: aquamarine;}</style>
6.使用定位position+margin
<template><div class="container"></div></template><style lang='scss' scoped>.container {position: absolute;left: 0;//设置距离左右为0right: 0;margin: 0 auto;//设置左右外margin为autowidth: 200px;height: 200px;background-color: aquamarine;}</style>
小记 :margin的百分比值根据父元素的width值来计算
已知元素高度——垂直居中
1.行内元素:使用line-height
<template><div class="container"><span>11122121</span></div></template><style lang='scss' scoped>.container {width: 200px;height: 200px;line-height: 200px;//设置行高等于父元素的高度background-color: aquamarine;}//可写可不写,line-height会继承父元素的line-heightspan {line-height: 200px;}</style>
2.块元素:使用flex
<template><div class="box"><div class="container"></div></div></template><style lang='scss' scoped>.box{display: flex;align-items: center;//在纵轴,元素居中排列width: 100%;height: 700px;background-color: gold;}.container {width: 200px;height: 200px;background-color: aquamarine;}</style>
3.使用position+margin-top
<template><div class="box"><div class="container"></div></div></template><style lang='scss' scoped>.box {position: relative;width: 100%;height: 700px;background-color: gold;}.container {position: absolute;top: 50%;margin-top: -100px;//向上移自身元素的一半width: 200px;height: 200px;background-color: aquamarine;}</style>
4.position+transform
<template><div class="box"><div class="container"></div></div></template><style lang='scss' scoped>.box {position: relative;width: 100%;height: 700px;background-color: gold;}.container {position: absolute;top: 50%;transform: translateY(-50%);//往y轴正方向(向上)移自身的一半width: 200px;height: 200px;background-color: aquamarine;}</style>
已知元素高度——垂直居中
1.自身元素使用position+transform
<template><div class="box"><div class="container"></div></div></template><style lang='scss' scoped>.box {position: relative;width: 100%;height: 700px;background-color: gold;}.container {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);//向x,y抽的负方向(向左,向上)分别移自身的一半width: 200px;height: 200px;background-color: aquamarine;}</style>
2.在父元素使用flex
<template><div class="box"><div class="container"></div></div></template><style lang='scss' scoped>.box {display: flex;justify-content: center;align-items: center;width: 100%;height: 700px;background-color: gold;}.container {width: 200px;height: 200px;background-color: aquamarine;}</style>
3.父元素display+自身margin全auto
<template><div class="box"><div class="container1"></div></div></template><style lang='scss' scoped>.box {display: flex;width: 100%;height: 700px;background-color: gold;}.container1 {width: 200px;height: 200px;margin: auto;background-color: aquamarine;}</style>