久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁技術文章
文章詳情頁

transform - css3 translate 的水平垂直居中問題求解

瀏覽:152日期:2023-07-11 17:37:45

問題描述

transform: translate(50%, 50%)

為什么能夠使一個元素水平垂直居中?

問題解答

回答1:

這樣寫并不能使一個元素水平垂直居中,只能使元素在當前位置分別往x軸和y軸正向平移自身寬度的一半距離。

之前答過一個題,樓主可以看一下,也許有一些幫助。

translate

回答2:

<!DOCTYPE html><html lang='zh-CN'><head> <!--author:Vace_Vlm(ocdo@qq.com),create:2016年5月21日 下午10:45--> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' /> <title>title</title> <style>*{ padding: 0;margin: 0;}html,body{ width:100%; height:100%;}.box{ position:relative; top:50%; left:50%; width:200px; height:200px; background:red; transform:translate(-50%,-50%); transform-origin:50% 50%;} </style></head><body> <p class='box'></p></body></html>回答3:

這樣寫并不能直接居中,可以定位,然后left:50%; 這個時候定位原點是父層的定位元素,然后使用translateX(-50%);這時候是相對于這個元素本身向左移動一半,最終效果剛好是居中的。

標簽: CSS
相關文章:
主站蜘蛛池模板: 五常市| 襄垣县| 鹤峰县| 沁阳市| 广东省| 宁强县| 上思县| 湖北省| 奉新县| 永清县| 故城县| 年辖:市辖区| 西安市| 巴塘县| 安泽县| 台南市| 福建省| 山阴县| 应城市| 剑川县| 黔东| 虹口区| 潼南县| 吉隆县| 乌拉特中旗| 勐海县| 商河县| 南昌县| 恩施市| 芦溪县| 朔州市| 格尔木市| 嘉峪关市| 麦盖提县| 剑河县| 丰城市| 浦江县| 彰化市| 吴旗县| 郓城县| 图木舒克市|