DIV+CSS上下左右绝对居中

 时间:2026-02-14 00:38:58

1、新建html文档。

DIV+CSS上下左右绝对居中

2、准备好需要用到的图片。

DIV+CSS上下左右绝对居中

3、书写hmtl代码。

<div id="middle"></div>

<div>DIV+CSS上下左右绝对居中,适用于所有浏览器,避开用js书写,减少前端书写代码,提高工作效率。</div>

DIV+CSS上下左右绝对居中

4、书写css代码。

<style type="text/css">

* {

margin:0;

padding:0;

}

body {

text-align:center;

}

#middle {

height: 244px;

left: 50%;

margin: -122px 0 0 -247px;

position: absolute;

top: 50%;

background:url(bg.jpg) no-repeat;

width: 494px;

}

</style>

DIV+CSS上下左右绝对居中

5、代码整体结构。

DIV+CSS上下左右绝对居中

6、查看效果。

DIV+CSS上下左右绝对居中

  • css怎么设置图片透明
  • div中的ul如何垂直居中
  • css如何清除li列表默认样式
  • 如何在div中让图片居中
  • 如何使用HTML5+CSS3设置无序列表无标点横向排列
  • 热门搜索
    说好普通话写好规范字手抄报 环保手抄报内容大全 端午节的手抄报怎么画 感恩父母手抄报内容 核心价值观手抄报内容 白衣天使的手抄报图片 感恩父母手抄报大全 崇尚英雄精忠报国手抄报 教师节手抄报内容文字 环保手抄报的内容