I’m trying to convert this html:

<div class="graph">
    <svg width='200' height='200' viewBox='-1 -1 2 2' xmlns='http://www.w3.org/2000/svg' style='display: block; margin: auto;'>
        <path d='M 0 0 L 1 0 A 1 1 0 0 1 -0.587785252292473 0.8090169943749475 Z' fill='#94d13d' />
        <path d='M 0 0 L -0.587785252292473 0.8090169943749475 A 1 1 0 0 1 -0.9510565162951535 -0.30901699437494773 Z' fill='#6f58e9' />
        <path d='M 0 0 L -0.9510565162951535 -0.30901699437494773 A 1 1 0 0 1 -0.30901699437494756 -0.9510565162951535 Z' fill='#2d99fe' />
        <path d='M 0 0 L -0.30901699437494756 -0.9510565162951535 A 1 1 0 0 1 1 -2.4492935982947064E-16 Z' fill='#2ddac1' />
    </svg>
</div>

to PDF using IText7:

ConverterProperties converterProperties = new ConverterProperties();
converterProperties.SetBaseUri(AppDomain.CurrentDomain.BaseDirectory + "templates/report/");
using (var newFileStream = new FileStream(reportPathPDF, FileMode.Create))
{
    var pdfWriter = new PdfWriter(newFileStream);
    PdfDocument pdf = new PdfDocument(pdfWriter);
    pdf.SetDefaultPageSize(PageSize.A4);
    var document = HtmlConverter.ConvertToDocument(htmlContent, pdf, converterProperties);
    document.Close();
}

On html its perfectly center-aligned to the div content. Here’s the CSS:

.graph
{
    margin-top:30px;
    text-align:center;
    width:100%;
    height:200px;
}

but on rendering in PDF, the graph is aligned to the left. Why, and how can I fix this?