CSS两种水平垂直居中示例介绍
方法一:实现固定大小的div框相对窗口水平垂直居中
```html
.center-box {
position: absolute;
top: 50%; / 设置垂直居中 /
left: 50%; / 设置水平居中 /
transform: translate(-50%, -50%); / 使元素自身中心对齐父元素的中心 /
width: 固定的宽度值; / 这里替换为你想要的宽度值 /
height: 固定的高度值; / 这里替换为你想要的高度值 /
background-color: 999; / 背景颜色可根据需求更改 /
}
```
方法二:实现自适应大小的div相对于浏览器窗口水平垂直居中
```html
body, html { / 确保整个页面都居中 /
height: 100%; / 高度为全屏 /
margin: 0; / 边距设为0 /
}
.adaptive-center {
position: absolute; / 使用绝对定位 /
top: 50%; / 设置垂直居中 /
left: 50%; / 设置水平居中 /
transform: translate(-50%, -50%); / 对齐元素自身的中心与父元素的中心 /
display: flex; / 使用flex布局使内容适应其容器大小 /
justify-content: center; / 水平居中对齐内容 /
align-items: center; / 垂直居中对齐内容 /
}
.content-box { / 这是你的自适应内容框样式 /
background-color: red; / 背景颜色可以根据需要更改 /
}
无需使用 'cambrian.render('body')',因为这是一个简单的HTML文档结构。你可以直接将上述代码粘贴到一个HTML文件中,并在浏览器中打开它,查看效果。
网站模板
- CSS两种水平垂直居中示例介绍
- em是何物 em与px的介绍及换算方法
- Windows 10开始菜单变化一览 经典功能再升级
- 电脑机箱选购六大技巧 如何选购电脑机箱
- 修改CSS样式实现网页灰色(没有颜色只有浅色黑白
- 电脑族怎样保护眼睛 常用电脑须学会的九个保护
- 汇佰硕光影手T300游戏鼠标怎么样-
- CSS实现半透明边框与多重边框的场景分析
- 旅游摄影师最常犯的错误原因分析
- ai怎么设计抽象叶片图形logo- ai抽象图标的设计技
- li标签的position-absolute与relative案例应用
- ai怎么手绘圣诞节海报- ai圣诞节霓虹灯宣传图的
- 纽约时报推手机产品NYT Now 新闻简短仍需付费
- select网页下拉列表与div层遮盖问题
- Acer预装Windows 10正式版产品型号公布
- 微软发布Visual Studio 2017正式版下载地址(附发布会