我正试着把手风琴居中。起初，我尝试使用margin:auto；，但它没有居中。然后我用左边试了一下：50%；最高：50%；transform：翻译（-50%,-50%）；并起作用，但我发现有些地方不对。手风琴后面有一段，放在手风琴前面。
null
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.area {
font-size: 20px;
color: red;
text-align: center;
margin: 2% 0;
}
/* ========================== Accordion ==================================== */
.accordion {
position: absolute;
width: 70%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI</title>
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.css">
<link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.structure.css">
<link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.theme.css">
</head>
<body>
<p class="area">---------------------------- Accordion ----------------------------</p>
<div class="accordion">
<h2 class="accordion-title">Web Design</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
<h2 class="accordion-title">Web Development</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
<h2 class="accordion-title">Programming</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
<h2 class="accordion-title">Wordpress Development</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
<h2 class="accordion-title">Digital Marketing</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
</div>
<p class="area">----------------------------------------------------------------------</p>
<!-- ------------------------- JavaScript Start ---------------------------------------- -->
<script src="./jquery-3.6.0.js"></script>
<script src="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
// --------------------------- Accordion ------------------------------------
$(".accordion").accordion();
});
</script>
<!-- ------------------------- JavaScript End ---------------------------------------- -->
</body>
</html>null
手风琴前后各有一段。但居中后，它们发生在顶部。
我下载了jQuery和jQuery ui文件。jQuery版本:3.6.0和jQuery ui版本:1.12.1。
如何修复此问题？
您可以使用css Flex。它会解决你的问题。你所要做的就是用另一个div包装手风琴div。
比如,
<div class="wrapper">
<div class="accordion">
.
.
.
</div>
<div>
在css中
.wrapper{
justify-content: center;
display: flex;
}
.accordian{
width: 70%;
}
请从accordian类中删除所有其他css属性。应该管用。
